<template>
  <div class="members">
    <head-form-new
      ref="headForm"
      title="土地交易明细"
      :form-data="formData"
      :query-params="queryParams"
      :total="tableDataTotal"
      :headerFixed="true"
      :isExcel="true"
      @handle-excel="clickDialog"
      @handle-search="handleSearch"
    >
      <template slot="slot">
        <div class="search-box">
            <span class="search-box-t"
                  @click="handleSearch1">筛选<i :class="searchState ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></span>
          <div v-show="searchState" id="showContent" class="search-main">
            <div class="item">
              <span class="wrap_label">供应方式</span>
              <div class="item_ckquery">
                <template v-for="(item,index) in supplyLandWayOptions">
                  <span :class="{color_text:item.value == supplyLandWay}" @click="handleChange('1',item.value)">{{item.value}}</span>
                </template>
              </div>
            </div>
            <div class="item">
              <span class="wrap_label">持股比例</span>
              <div class="item_ckquery">
                <template v-for="(item,index) in cgblList">
                  <span :class="{color_text:item.label == cgblName}" @click="handleChange('2',item.label)">{{item.label}}</span>
                </template>
              </div>
            </div>
          </div>
        </div>
      </template>
    </head-form-new>
    <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
    <tables
      v-if="!isSkeleton"
      :tableLoading="tableLoading"
      :tableData="tableData"
      :forData="forData"
      :headerFixed="true"
      :tableDataTotal="tableDataTotal"
      :queryParams="queryParams"
      :MaxPage=500
      @handle-current-change="handleCurrentChange"
    >
      <template slot="companyName" slot-scope="scope">
        <div v-if="scope.row.companyId&&scope.row.companyName" class="a-link" @click="getUipIdByCid(scope.row.companyId)" v-html="scope.row.companyName"></div>
        <div v-else v-html="scope.row.companyName || '--'"></div>
      </template>
      <template slot="projectName" slot-scope="scope">
        <div v-if="scope.row.id&&scope.row.projectName" class="a-link" @click="getDetail(scope.row.id)" v-html="scope.row.projectName"></div>
        <div v-else v-html="scope.row.projectName || '--'"></div>
      </template>
      <template slot="stockPercent" slot-scope="scope">
        <div>{{scope.row.stockPercent || '--'}}{{scope.row.stockPercent ?  '%':''}}</div>
      </template>
    </tables>
    <ExportDialog :data="exportData" v-if="exportData.dialogExportVisible" @clickEXCEL="clickEXCEL"></ExportDialog>
  </div>
</template>

<script>
  import { landMarketPage, memberCount, memberList, landMarketExport } from '@/api/detail/groupAccount/groupAccount'
  import { getUipIdByCid } from '@/api/macro/macro'
  import dataRegion from '@/assets/json/dataRegion'
  import { getDictType } from '@/api/main'
  import mixin from '../../party-a/mixins/mixin'
  import ExportDialog from '../../../component/export-dialog'
  import api from '@/api/radar/radar.js'

  export default {
    name: 'landtransaction',
    props: ['customerId','combineName'],
    mixins: [mixin],
    components:{ExportDialog},
    data(){
      return{
        isSkeleton:true,
        tableLoading:false,
        isDetails: false,
        defaultSort: {prop: 'time', order: 'descending'},
        queryParams: {
          combineId: this.customerId,
          pageNum: 1,
          pageSize: 20,
        },
        forData: [
          {label: '受让人/集团成员', prop: 'companyName',minWidth: '285',slot:true},
          {label: '持股比例', prop: 'stockPercent', minWidth: '100',slot:true},
          {label: '项目名称', prop: 'projectName',minWidth: '285',slot:true},
          {label: '成交金额(万元)', prop: 'transactionPrice',minWidth: '120'},
          {label: '行政区划', prop: 'domicile',minWidth: '180'},
          {label: '出让面积(平方米)', prop: 'acreage',minWidth: '150'},
          {label: '土地用途', prop: 'landUse',minWidth: '120'},
          {label: '供应方式', prop: 'supplyLandWay', minWidth: '100'},
          {label: '土地坐落', prop: 'landAddr', minWidth: '285'},
          {label: '合同签订日期', prop: 'contractSignTime', minWidth: '120'},
        ],
        formData: [
          { type: 7, fieldName: 'area', value: '',props: {multiple: true,value: 'id',expandTrigger: 'hover'}, placeholder: '行政区划', options:[], uid: this.getUid()},
          { type: 4, fieldName: 'landUse', value: '', placeholder: '土地用途', options: [], uid: this.getUid() },
          // { type: 4, fieldName: 'supplyLandWay', value: '', placeholder: '供应方式', options: [], uid: this.getUid() },
          { type: 8, fieldName: 'startAcreageList', value: '', placeholder: '出让面积', options: [], uid: this.getUid()},
          // { type: 1, fieldName: 'StockPercent', value: '', placeholder: '持股比例', options: [], uid: this.getUid()},
          { type: 9, fieldName: 'money', value: '', placeholder: '成交金额', startMoney: 'startTransactionPrice', endMoney: 'endTransactionPrice',moneyList:[], uid: this.getUid() },
          { type: 5, fieldName: 'time', value: '', placeholder: '合同签订时间', startTime: 'contractSignTimeStart', endTime: 'contractSignTimeEnd',timeList:[],dateTo:this.formatDate(new Date()) , uid: this.getUid()},
          { type: 0, fieldName: 'penalizeReasonType', value: '', placeholder: '筛选', options: [], uid: this.getUid()},
          { type: 3, fieldName: 'keyword', value: '', placeholder: '输入关键词查询', uid: this.getUid()},
        ],
        acreageOptions: [
          {
            value: "不限",
            label: "不限",
          },
          {
            value: [0, 500],
            label: "500平以下",
          },
          {
            value: [500, 1000],
            label: "500-1000平",
          },
          {
            value: [1000, 5000],
            label: "1000-5000平",
          },
          {
            value: [5000, 20000],
            label: "5000-2万平",
          },
          {
            value: [20000, 50000],
            label: "2万-5万平",
          },
          {
            value: [50000, 100000],
            label: "5万-10万平",
          },
          {
            value: [100000, ""],
            label: "10万平以上",
          },
        ],
        supplyLandWayOptions: [
          {name:'划拨供地',value:'划拨供地'},
          {name:'协议出让',value:'协议出让'},
          {name:'国有租赁',value:'国有租赁'},
          {name:'拍卖出让',value:'拍卖出让'},
          {name:'招标出让',value:'招标出让'},
          {name:'挂牌出让',value:'挂牌出让'},
        ],
        supplyLandWay:'',
        tableData:[],
        tableDataTotal:0,
        cgblList:[
          {value:'100%',label:'100%'},
          {value:'50%以上',label:'50%以上'},
          {value:'20%以上',label:'20%以上'},
          {value:'5%以上',label:'5%以上'},
          {value:'1%-5%',label:'1%-5%'},
          ],
        cgblName:'',
        paramsData:{},  //储存组件筛选的条件
        dataEXCEL:{},
        exportData:{
          title:'集团商机土地交易',
          dialogExportVisible:false,
          forData: [
            {label: '受让人/集团成员', prop: 'srr',minWidth: '260'},
            {label: '持股比例', prop: 'cgbl', minWidth: '100'},
            {label: '项目名称', prop: 'xmmc',minWidth: '250'},
            {label: '成交金额(万元)', prop: 'cjje',minWidth: '120'},
            {label: '行政区划', prop: 'xzqh',minWidth: '120'},
            {label: '出让面积(平方米)', prop: 'crmj',minWidth: '150'},
            {label: '土地用途', prop: 'tdyt',minWidth: '100'},
            {label: '供应方式', prop: 'gyfs', minWidth: '100'},
            {label: '土地坐落', prop: 'tdzl', minWidth: '260'},
            {label: '合同签订日期', prop: 'registeredDate', minWidth: '120'},
          ],
          exportTableData:[
            {
              srr:'XX集团有限公司',
              cgbl:'1.56%',
              xmmc:'广州市产业园区配套基础设施建设',
              cjje:'3000',
              xzqh:'广州',
              crmj:'1000',
              tdyt:'工业用地',
              gyfs:'划拨工地',
              tdzl:'联港四路北侧、环港东路西侧',
              registeredDate:'2023-11-07',
            },
            {
              srr:'XX集团有限公司',
              cgbl:'1.24%',
              xmmc:'重庆江津市110KV输变电工程',
              cjje:'300',
              xzqh:'重庆',
              crmj:'5000',
              tdyt:'工业用地',
              gyfs:'划拨工地',
              tdzl:'联港四路北侧、环港东路西侧',
              registeredDate:'2023-11-07',
            },
          ],
          exportEXCEL:false,
        },
        timeList: ['不限','近1个月', '近半年', '近1年',  '近3年', '自定义'],
        searchState:false,
      }
    },
    watch:{
      searchState:{
        handler(newVal, olVal) {
          if (newVal) {
            setTimeout(() => {
              document.addEventListener('click', this.handleSearch1);
            }, 0);
          } else {
            document.removeEventListener('click', this.handleSearch1);
          }
        }
      }
    },
    created() {
      this.searchDic()
      this.handleSearch()
      this.dataRegion()
      this.formData[2].options=this.acreageOptions;
      this.formData[4].timeList=this.timeList;
    },
    methods: {
      //土地用途
      searchDic(){
        api.searchDic().then(res=>{
          let data = []
          res.landUse.forEach(item => {
            let arr = {value:item,name:item}
            data.push(arr)
          });
          this.formData[1].options = data
        }).catch(error=>{

        });

      },
      // 筛选
      handleSearch1(event){
        // this.searchState=!this.searchState;
        let dom = document.getElementById("showContent");
        if(dom){
          if (!dom.contains(event.target)) {
            this.searchState = !this.searchState;
            document.removeEventListener('click', this.handleQuery);
          }
        }
      },
      handleChange(key,name) {
        if(key === '1'){
          this.queryParams.pageNum = 1
          name = name == this.supplyLandWay?'':name
          this.supplyLandWay = name

          this.paramsData.supplyLandWay = name
          this.handleSearch(this.paramsData,1)
        }
        if(key === '2'){
          this.queryParams.pageNum = 1
          name = name == this.cgblName?'':name
          this.cgblName = name
          // this.paramsData.StockPercent = name
          this.handleSearch(this.paramsData,1)
        }
      },
      handleSearch(params=[],type){
        let arr = {}
          if(!type){
          params.forEach(item=>{
            arr[item.fieldName] = item.value
          })
          this.queryParams.pageNum = 1
            this.paramsData = {}
            if(arr.area){
              let area = []
              arr.area.forEach(item=>{
                area.push(item[item.length-1])
              })
              this.paramsData.area = area.toString()
            }
        }else{
            arr = params
          }
        if(arr){
          this.paramsData.landUse = arr.landUse?arr.landUse.toString():''
          this.paramsData.supplyLandWay = arr.supplyLandWay?arr.supplyLandWay.toString():''
          if (this.cgblName) {
            let StockPercent = parseFloat(this.cgblName)
            this.paramsData.minStockPercent = StockPercent / 100
            if (StockPercent == 1) {
              this.paramsData.maxStockPercent = 5 / 100
            }
            if (StockPercent == 100) {
              this.paramsData.maxStockPercent = StockPercent / 100
            }
          }else{
            this.paramsData.minStockPercent = null
            this.paramsData.maxStockPercent = null
          }
          if(arr.money){
            this.paramsData.startTransactionPrice = arr.money[0]?parseFloat(arr.money[0]):null
            this.paramsData.endTransactionPrice = arr.money[1]?parseFloat(arr.money[1]):null
          }
          if(arr.time){
            this.paramsData.contractSignTimeStart = arr.time[0]?arr.time[0]:null
            this.paramsData.contractSignTimeEnd = arr.time[1]?arr.time[1]:null
          }
          if(arr.startAcreageList && arr.startAcreageList != '不限'){
            this.paramsData.startAcreage = arr.startAcreageList[0]?parseFloat(arr.startAcreageList[0]):null
            this.paramsData.endAcreage = arr.startAcreageList[1]?parseFloat(arr.startAcreageList[1]):null
          }
          this.paramsData.keyword = arr.keyword
        }
        this.paramsData.combineId = this.customerId,
        this.tableLoading=true;
        var dateparams = {
          page: {
            page: this.queryParams.pageNum,
            limit: this.queryParams.pageSize
          },
          landMarketDto: this.paramsData
        }
        // this.dataEXCEL=JSON.parse(JSON.stringify(data));
        landMarketPage(JSON.stringify(dateparams)).then(res=>{
          this.isSkeleton = false
          this.tableLoading = false
          if(res.code === 200){
            this.tableData = res.data.list
            this.tableDataTotal = res.data.total
          }else {
            this.tableData = []
          }
        })
      },
      //地区
      async dataRegion() {
        var str = [];
        for (let x = 0; x < 3; x++) {
          for (let i = 0; i < dataRegion.length; i++) {
            if (dataRegion[i].regionLevel == x + 1 && x + 1 == 1) {
              str.push({
                'id': dataRegion[i].id,
                "label": dataRegion[i].regionName,
                "short": dataRegion[i].short,
                "value": dataRegion[i].parentId,
                "children": []
              });
            } else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 2) {
              for (let j = 0; j < str.length; j++) {
                if (str[j].id == dataRegion[i].parentId) {
                  str[j].children.push({
                    'id': dataRegion[i].id,
                    "label": dataRegion[i].regionName,
                    "short": dataRegion[i].short,
                    "value": dataRegion[i].parentId,
                    "children": []
                  });
                }
              }
            } else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 3) {
              for (let j = 0; j < str.length; j++) {
                for (let k = 0; k < str[j].children.length; k++) {
                  if (str[j].children[k].id == dataRegion[i].parentId) {
                    str[j].children[k].children.push({
                      'id': dataRegion[i].id,
                      "label": dataRegion[i].regionName,
                      "short": dataRegion[i].short,
                      "value": dataRegion[i].parentId
                      // "children":[]
                    });
                  }
                }
              }
            }
          }
        }
        this.addressList = str;
        this.formData[0].options=str;
      },
      //分页
      handleCurrentChange(e){
        this.queryParams.pageNum = e
        this.handleSearch(this.paramsData,1)
        this.$emit('handle-scroll')
      },
      getUipIdByCid(companyId){
        this.$router.push({path: '/enterprise/'+this.encodeStr(companyId)})
      },
      getDetail(id){
        this.$router.push({path: '/radar/Land/details/'+id})
      },
      clickDialog(){
        this.exportData.dialogExportVisible=true;
      },
      clickEXCEL(value,title) {
        if(this.tableData.length === 0){
          this.$message.error('当前信息列表数据为空，请重新筛选数据');
          return
        }
        if(value > 2000){
          return
        }
        this.dataEXCEL.exportExeclName=title;
        if(value){
          this.dataEXCEL.exportCount=value
        }else {
          this.dataEXCEL.exportCount=2000;
        }
        this.dataEXCEL.landMarketDto = this.paramsData
        landMarketExport(this.dataEXCEL).then(res=>{
          if(res.code === 200){
            this.exportData.exportEXCEL=true;
          }else {
            this.$message.error(res.msg);
          }
        })
      },
      cancel(){
        this.exportData.dialogExportVisible=false;
        this.exportData.exportEXCEL={}
      },
      formatDate(timestamp) {
        var time = new Date(timestamp)
        let year = time.getFullYear();
        let month = time.getMonth() + 1 >= 10 ? parseInt(time.getMonth() + 1) : "0" + parseInt(time.getMonth() + 1);
        let day = time.getDate() >= 10 ? time.getDate() : "0" + time.getDate();
        return year + '-' + month + '-' + day
      },
    }
  }
</script>

<style lang="scss" scoped>
  .members{
    background: #ffffff;
    border-radius: 4px;
    padding: 16px;
    .headForm{
      margin-bottom: 14px;
      .common-title{
        margin-right: 24px;
      }
    }
    .search-box {
      display: inline-block;
      border-radius: 4px;
      /*border: 1px solid #D9D9D9;*/
      width: 70px;
      /*cursor: pointer;*/
      position: relative;
      .search-box-t {
        font-size: 14px;
        font-weight: 400;
        line-height: 32px;
        color: rgba(35,35,35,0.8);
        margin-right: 8px;
        text-align: center;
        width: 70px;
        display: inline-block;
        cursor: pointer;
        i {
          color: rgba(35, 35, 35, 0.4);
          margin-left: 5px
        }
      }
      .search-box-ta {
        color: #0081FF;
        i {
          color: #0081FF;
        }
      }
      .search-main{
        background: #ffffff;
        box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1);
        border-radius: 4px;
        width: 500px;
        //height: 337px;
        padding: 16px;
        position: absolute;
        top: 34px;
        left: 0;
        z-index: 2001;
        .item{
          margin-bottom: 5px;
          display: flex;
          /*align-items: center;*/
          font-size: 14px;
          .wrap_label{
            color: rgba(35,35,35,0.8);
            margin-right: 12px;
            line-height: 24px;
            width: 77px;
            text-align: right;
            /*float: left;*/
          }
          .item_ckquery{
            position: relative;
            width: 400px;
            /*float: left;*/
            /*flex: 1;*/
            span{
              color: #232323;
              padding: 3px 6px;
              margin-bottom: 5px;
              display: inline-block;
              cursor: pointer;
              margin-right: 8px;
            }
            .color_text{
              background: #F3F4F5;
              border-radius: 4px;
              color: #0081FF;
            }
            .select-active{
              color: #0081FF;
            }
          }

          .cascader-region {
            position: absolute;
            left: 0;
            top: -6px;
            opacity: 0;
            line-height: 22px;
          }
        }
      }
    }
    ::v-deep .el-table{
      .has-gutter{
        tr{
          th:nth-last-child(2){
            border-right:0;
          }
          td:nth-last-child(2){
            border-right:0;
          }
        }
      }
      .el-table__cell.gutter{
        background: #F0F3FA;
      }
    }
    ::v-deep .el-icon-arrow-down,.el-icon-arrow-up{
      font-size: 14px;
      color:#232323 !important;
    }
    .minwid{
      >div{
      width: 260px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      }
    }
    @import "@/assets/styles/search-common.scss";
  }
</style>
