<template>
  <div>
    <el-form :model="formInline" :rules="rulesHetong" ref="heForm" label-width="130px" class="demo-ruleForm">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="合同类型" prop="contractType">
            <el-select v-model="formInline.contractType" placeholder="请选择" style="width: 100%;">
              <el-option label="商铺合同" value="商铺合同"></el-option>
              <el-option label="广告位合同" value="广告位合同"></el-option>
              <el-option label="场地合同" value="场地合同"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合同编号" prop="contractNumber">
            <el-input v-model="formInline.contractNumber" placeholder="请输入" maxlength="20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="标段号" prop="sectionNumber">
            <el-input v-model="formInline.sectionNumber" placeholder="请输入" maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合同名称" prop="contractName">
            <el-input v-model="formInline.contractName" placeholder="请输入" maxlength="50"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="合同签订日期" prop="contractSigningDate">
            <el-date-picker v-model="formInline.contractSigningDate" type="date" value-format="yyyy-MM-dd"
              placeholder="选择日期" style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="押金" prop="earnestMoney">
            <el-input v-model="formInline.earnestMoney" placeholder="请输入" maxlength="20"></el-input>
          </el-form-item>

        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="起租日期" prop="leaseStartDate">
            <el-date-picker v-model="formInline.leaseStartDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
              style="width: 100%;">
            </el-date-picker>
          </el-form-item>

        </el-col>
        <el-col :span="12">
          <el-form-item label="终止日期" prop="contractTerminationDate">
            <el-date-picker v-model="formInline.contractTerminationDate" type="date" value-format="yyyy-MM-dd"
              placeholder="选择日期" style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="付款周期" prop="paymentCycle">
            <el-select v-model="formInline.paymentCycle" placeholder="请选择" style="width: 100%;">
              <el-option label="按年" value="按年"></el-option>
              <el-option label="按月" value="按月"></el-option>
              <el-option label="按日" value="按日"></el-option>
              <el-option label="季度" value="季度"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="租金" prop="contractAmount">
            <el-input v-model="formInline.contractAmount" placeholder="请输入" maxlength="20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="付款日" prop="paymentDay">
            <el-select v-model="formInline.paymentDay" placeholder="请选择" style="width: 100%;">
              <el-option :label="val+'号'" :value="val+'号'" v-for="val in 31"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="承租人银行账号" prop="tenantBankAccount">
            <el-input v-model="formInline.tenantBankAccount" placeholder="请输入" maxlength="20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="绑定商家" prop="relatedMerchants">
        <el-select style="width: 100%;" v-model="formInline.relatedMerchants" placeholder="请输入关键词搜索" filterable
          @change="changeRelatedMerchants">
          <el-option v-for="(item,index) in shopList" :key="index" :label="item.shopName+ ' ' + item.chargePersonPhone"
            :value="index" />
        </el-select>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="承租人名称" prop="tenantName">
            <el-input v-model="formInline.tenantName" placeholder="请输入" maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="tenantTelephone">
            <el-input v-model="formInline.tenantTelephone" placeholder="请输入" maxlength="20"></el-input>
          </el-form-item>

        </el-col>

      </el-row>
      <el-form-item label="附件信息" prop="appendicesContract">

        <el-upload :auto-upload="false" class="video-uploader" :action="uploadFileUrl" :on-remove="hefuRemove"
          :on-change="hefuSuccess" :file-list="hefuData">
          <el-button style="background-color: #fff;color: #3F9B6A;border: 1px solid #dcdfe6;" class="buttonHover"
            v-if="hefuData.length==0">+点击上传</el-button>
          <div v-if="hefuData.length==0" slot="tip" class="el-upload__tip">（不超过50M，格式支持word、excel、ppt、pdf）</div>
        </el-upload>

      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="绑定资源" prop="shopNumber">
            <div style="border: 1px solid #E5E5E5;padding: 1px" id="huodong">
              <div
                style="font-size: 14px;border-bottom: 1px solid #E5E5E5;display: flex;justify-content: space-between;line-height:20px;background:#F2F3F5;">
                <div></div>
                <div v-if="AddData.length != 1" style="color: #3F9B6A;padding:10px;" @click="mingShow">
                  添加
                </div>
              </div>
              <div style="padding: 15px;">
                <div style="padding: 0px 20px 0px 0px">
                  <el-table :data="AddData"
                    :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
                    <el-table-column label="序号" min-width="5%">
                      <template slot-scope="scope">
                        {{scope.$index + 1}}
                      </template>
                    </el-table-column>
                    <el-table-column label="资源名称" min-width="20%" show-overflow-tooltip>
                      <template slot-scope="scope">
                        {{scope.row.shopName ? scope.row.shopName :  scope.row.advertisingName?scope.row.advertisingName:scope.row.venueName}}
                      </template>
                    </el-table-column>
                    <el-table-column label="资源类型" min-width="10%">
                      <template slot-scope="scope">
                        {{scope.row.shopName ? '商铺' : scope.row.advertisingType?scope.row.advertisingType:'场地'}}
                      </template>
                    </el-table-column>

                    <el-table-column label="详细地址" min-width="20%">
                      <template slot-scope="scope">
                        {{scope.row.detailedLocation}}
                      </template>
                    </el-table-column>

                    <el-table-column prop="notes" label="实际使用面积" min-width="25%">
                      <template slot-scope="scope">
                        {{scope.row.actualArea ? scope.row.actualArea :  scope.row.actualUsableArea?scope.row.actualUsableArea:'-'}}
                      </template>

                    </el-table-column>

                    <el-table-column label="操作" min-width="15%">
                      <template slot-scope="scope">
                        <div @click="MingDelete(scope.$index)" class="tableBtn greens">删除</div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item>
            <div style="margin-top: 20px">
              <el-button @click="add()" style="background-color: #3F9B6A;color: #fff;">确定</el-button>
              <el-button @click="close()" class="buttonHover"
                style="color: #606266;border: 1px solid #DBDBDB;background-color: #fff;">取消</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog :visible.sync="addMing" title="选择资源" style="padding: 0;" width="65%" append-to-body center
      :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <div style="max-height:50vh;overflow-y: auto;">
        <el-table :data="ziyuanData" tooltip-effect="dark" @row-click="handleSelectionChange"
          :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}" highlight-current-row>
          <!-- <el-table-column label="选择" type="selection" width="55">
          </el-table-column> -->
          <el-table-column label="序号">
            <template slot-scope="scope">
              {{scope.$index + 1}}
            </template>
          </el-table-column>
          <el-table-column label="编号" prop="id">

          </el-table-column>
          <el-table-column label="资源名称">
            <template slot-scope="scope">
              {{scope.row.shopName ? scope.row.shopName :  scope.row.advertisingName?scope.row.advertisingName:scope.row.venueName}}
            </template>
          </el-table-column>
          <el-table-column label="资源类型">
            <template slot-scope="scope">
              {{scope.row.shopName ? '商铺' : scope.row.advertisingType?scope.row.advertisingType:'场地'}}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <div style="display: flex; justify-content: flex-end; align-items: center;">
          <el-button @click="minSev" style="background-color: #3F9B6A;color: #fff;">确定</el-button>
          <el-button @click="mingClose" class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import {
    businessListGetAll,
  } from '@/api/business'
  import upimg from "@/components/ImageUpload/index"
  import {
    uploadUrl
  } from '@/utils/request'
  import {
    getAlls,
    changAlls
  } from '@/api/information.js'
  import {
    getAlls as map1
  } from '@/api/map1.js'
  import {
    miniioupload
  } from '@/api/commodityLease.js'
  import {

    contractinsertAdd
  } from '@/api/manage.js'
  export default {
    components: {
      upimg
    },
    data() {
      return {
        AddData: [], //最后资源
        multipleSelection: [], //资源
        addMing: false,
        ziyuanData: [],
        shopId: null,
        hefuData: [], //合同附件
        uploadFileUrl: uploadUrl, // 请求地址
        shopList: [],
        formInline: {
          // 合同类型
          contractType: '',
          // 合同编号
          contractNumber: '',
          // 标段号
          sectionNumber: '',
          // 合同名称
          contractName: '',
          // 押金
          earnestMoney: '',
          // 合同签订日期
          contractSigningDate: '',
          // 合同终止日期
          contractTerminationDate: '',
          // 起租日期
          leaseStartDate: '',
          // 付款周期
          paymentCycle: '',
          // 合同金额（租金）
          contractAmount: '',
          // 付款日
          paymentDay: '',
          // 承租人名称
          tenantName: '',
          // 承租人联系电话
          tenantTelephone: '',
          // 承租人银行账号
          tenantBankAccount: '',
          // 关联商家
          relatedMerchants: '',
          // 商铺编号(绑定资源)
          shopNumber: '',
          // 合同附件
          appendicesContract: '',
          //合同状态
          dataStatus: '1'
        },
        rulesHetong: {
          contractType: [{
            required: true,
            message: '请选择合同类型',
            trigger: 'change'
          }],
          contractNumber: [{
            required: true,
            message: '请输入合同编号',
            trigger: 'blur'
          }],
          sectionNumber: [{
            required: true,
            message: '请输入标段号',
            trigger: 'blur'
          }],
          contractName: [{
            required: true,
            message: '请输入合同名称',
            trigger: 'blur'
          }],
          earnestMoney: [{
            required: true,
            message: '请输入押金',
            trigger: 'blur'
          }],
          contractSigningDate: [{
            required: true,
            message: '请选择签订日期',
            trigger: 'change'
          }],
          contractTerminationDate: [{
            required: true,
            message: '请选择终止日期',
            trigger: 'change'
          }],
          leaseStartDate: [{
            required: true,
            message: '请选择起租日期',
            trigger: 'change'
          }],
          paymentCycle: [{
            required: true,
            message: '请选择付款周期',
            trigger: 'change'
          }],
          contractAmount: [{
            required: true,
            message: '请输入租金',
            trigger: 'blur'
          }],
          paymentDay: [{
            required: true,
            message: '请选择付款日',
            trigger: 'change'
          }],
          tenantName: [{
            required: true,
            message: '请输入承租人名称',
            trigger: 'blur'
          }],
          tenantTelephone: [{
            required: true,
            message: '请输入联系电话',
            trigger: 'blur'
          }],
          tenantBankAccount: [{
            required: true,
            message: '请输入承租人银行账号',
            trigger: 'blur'
          }],
          relatedMerchants: [{
            required: true,
            message: '请选择绑定商家',
            trigger: 'change'
          }],
          shopNumber: [{
            required: true,
            message: '请选择绑定资源',
            trigger: 'change'
          }],
          appendicesContract: [{
            required: true,
            message: '请上传合同附件',
            trigger: 'blur'
          }],
        },
        shopfrom: {
          shopName: '', // 店铺名称
          shopCode: '', // 店铺编码
          chargePersonName: '', // 店铺负责人
          contractState: '1', // 合同状态 1-有效 0-无效
          page: '1', // 当前页
          pageSize: '1000' // 每页记录数
        },
        pageindex: {
          pageNumber: 1,
          pageSize: 10,
        },
        baseURL: 'http://192.168.2.38:9003',
        uploadFiles: [],
        filesLength: 1
      };
    },
    props: {
      info: {
        type: Object,
        default: {}
      }
    },
    created() {
      businessListGetAll(this.shopfrom).then(res => {
        this.shopList = res.data.list
        console.error(this.shopList)
      })
    },
    methods: {
      add() {
        console.error(this.AddData)
        console.error(this.hefuData)
        // console.error()
        let c1 = ''
        for (let i = 0; i < this.hefuData.length; i++) {
          if (i == 0) {
            c1 = this.hefuData[i].url
          } else {
            c1 = c1 + ',' + this.hefuData[i].url
          }
        }
        let c2 = ''
        for (let i = 0; i < this.AddData.length; i++) {
          let cnet = ''
          if (this.AddData[i].shopName) {
            cnet = 'sp' + this.AddData[i].id
          } else if (this.AddData[i].advertisingType) {
            cnet = 'gg' + this.AddData[i].id
          } else {
            cnet = 'cd' + this.AddData[i].id
          }
          if (i == 0) {
            c2 = cnet
          } else {
            c2 = c2 + ',' + cnet
          }
        }

        if (this.formInline.id) {
          // this.$refs[formName].validate((valid) => {
          //   console.log(valid)
          //   if (valid) {
          //     contractinsertAdd(this.formInline).then(res => {

          //     })
          //   } else {
          //     this.$message({
          //       message: '请填写完整信息',
          //       type: 'error'
          //     })
          //     return false;
          //   }
          // })
        } else {

          this.formInline.appendicesContract = c1
          this.formInline.shopNumber = c2
          console.error({
            ...this.formInline
          })
          this.$refs.heForm.validate((valid) => {
            console.log(valid)
            if (valid) {
              contractinsertAdd({
                ...this.formInline,
                relatedMerchants: this.shopId,
                updateUser: localStorage.getItem('roleName')
              }).then(res => {
                console.error(res)
                if (res.code == 200) {
                  this.$message({
                    message: '添加成功',
                    type: 'success'
                  })
                  this.$emit('removeonaction', '1')
                } else {
                  this.$message({
                    message: res.msg,
                    type: 'error'
                  })
                }

              })
            } else {
              this.$message({
                message: '请填写完整信息',
                type: 'error'
              })
              return false;
            }
          })

        }
      },
      close() {
        this.$emit('removeonaction', '1')
      },
      MingDelete(item) {
        this.AddData.splice(item, 1);
      },
      async mingShow() {
        const ziyuan = await getAlls(this.pageindex)
        const ggw = await map1(this.pageindex)
        const changdi = await changAlls(this.pageindex)
        this.ziyuanData = [...ziyuan.data.content, ...ggw.data.content, ...changdi.data.content]
        console.error(this.ziyuanData)
        this.addMing = true
      },
      handleSelectionChange(selection) {
        // 处理选择变化的逻辑
        console.error(selection)
        this.multipleSelection= []
        this.multipleSelection.push(selection)
      },
      minSev() {
        // this.AddData = this.multipleSelection
        const filteredAddData = this.AddData.filter(itemAdd => {
          // 使用 some 方法检查 this.multipleSelection 中是否存在具有相同 id 的元素
          return !this.multipleSelection.some(itemMultiple => itemMultiple.id === itemAdd.id);
        });
        this.AddData = filteredAddData.concat(this.multipleSelection)
        this.addMing = false
        this.multipleSelection = []

      },
      mingClose() {
        this.multipleSelection = []
        this.ziyuanData = []
        this.addMing = false
      },
      changeRelatedMerchants(e) {
        console.error(e)
        this.shopId = this.shopList[e].shopId
        this.formInline.tenantName = this.shopList[e].chargePersonName
        this.formInline.tenantTelephone = this.shopList[e].shopPhone
      },
      hefuRemove() {
        this.hefuData = []
      },
      hefuSuccess(response, file, fileList) {
        this.hefuData = []
        console.error(response)
        let fd = new FormData()
        fd.append('file', response.raw)
        fd.append('filePath', 'hetong')
        miniioupload(fd).then(res => {
          console.error(res)
          const fileMsg = {
            name: response.name,
            url: res.data,
          }
          this.hefuData.push(fileMsg)
        })
      },


    },
  };
</script>
<style lang="css">
  .el-upload {
    display: block;
    text-align: left;
  }

  .el-dialog__header {
    background-color: #F2F3F5;
    text-align: left;
  }

  .el-dialog__title {
    line-height: 30px;
    font-size: 15px;
    color: #303133;
  }
</style>
