<template>
  <div>
    <el-form :model="formInline" :rules="rulesHetong" ref="ruleForm" label-width="130px" class="demo-ruleForm">
      <el-form-item label="word模板" prop="appendicesContract">
        <upfile filePath="mb" inputtype="appendicesContract" :value="formInline.appendicesContract"
          @changimg="e=>changimg(e,'appendicesContract')"></upfile>
      </el-form-item>
      <TitleWithCircle title="合同信息" style="margin-left: 65px;margin-bottom: 30px;" />
      <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-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>
    <div>
      <el-form ref="ruleForm" :rules="ruleAddData" label-width="130px" class="demo-ruleForm">
        <el-row :gutter="20">
          <el-col :span="item.title5 == '50%（半行）'?12:item.title5 == '100%（一行）'?24:12" v-for="(item,index) in AddData">
            <el-form-item :label="item.title1" :prop="item.title2" v-if="item.title3 == '单行文本'">
              <el-input v-model="item.value" placeholder="请输入" :maxlength="item.title6"></el-input>
            </el-form-item>
            <el-form-item :label="item.title1" :prop="item.title2" v-if="item.title3 == '多行文本'">
              <el-input show-word-limit rows="4" v-model="item.value" placeholder="请输入" type="textarea" :maxlength="item.title6"/>
            </el-form-item>
            <el-form-item :label="item.title1" :prop="item.title2" v-if="item.title3 == '日期'">
              <el-date-picker v-model="item.value" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <TitleWithCircle title="其他信息管理" style="margin-left: 65px;" />
    <div style="margin-top: 20px;margin-left: 65px;">
      <el-button @click="mingShow()" style="background-color: #3F9B6A;color: #fff;">添加</el-button>
    </div>
    <div style="margin-top: 20px;margin-left: 65px;">
      <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="字段排序">
            <template slot-scope="scope">
              {{scope.$index + 1}}
            </template>
          </el-table-column>
          <el-table-column prop="notes" label="字段名称">
            <template slot-scope="scope">
              {{scope.row.title1?scope.row.title1 : '-'}}
            </template>
          </el-table-column>
          <el-table-column prop="notes" label="字段key">
            <template slot-scope="scope">
              {{scope.row.title2?scope.row.title2 : '-'}}
            </template>
          </el-table-column>
          <el-table-column prop="notes" label="字段类型">
            <template slot-scope="scope">
              {{scope.row.title3?scope.row.title3 : '-'}}
            </template>
          </el-table-column>
          <el-table-column prop="notes" label="是否必填">
            <template slot-scope="scope">
              {{scope.row.title4?scope.row.title4 : '-'}}
            </template>
          </el-table-column>
          <el-table-column prop="notes" label="字段宽度">
            <template slot-scope="scope">
              {{scope.row.title5?scope.row.title5 : '-'}}
            </template>
          </el-table-column>
          <el-table-column prop="notes" label="限制规则">
            <template slot-scope="scope">
              {{scope.row.title6?scope.row.title6 : '-'}}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div @click="MingDelete(scope.$index)" class="tableBtn greens">删除</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div style="margin-top: 20px;margin-left: 65px;">
      <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-dialog :visible.sync="addMing" title="添加" style="padding: 0;" width="50%" append-to-body center
      :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <div v-if="addMing">
        <el-form :model="addmbitem" :rules="ruleaddmbitem" ref="addmbitem" label-width="130px" class="demo-ruleForm">
          <el-form-item label="字段名称" prop="title1">
            <el-input v-model="addmbitem.title1" placeholder="请输入" maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="字段key" prop="title2">
            <el-input v-model="addmbitem.title2" placeholder="请输入" maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="字段类型" prop="title3">
            <el-select v-model="addmbitem.title3" 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-form-item label="是否必填" prop="title4">
            <el-select v-model="addmbitem.title4" placeholder="请选择" style="width: 100%;">
              <el-option label="是" value="是"></el-option>
              <el-option label="否" value="否"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="字段宽度" prop="title5">
            <el-select v-model="addmbitem.title5" placeholder="请选择" style="width: 100%;">
              <el-option label="50%（半行）" value="50%（半行）"></el-option>
              <el-option label="100%（一行）" value="100%（一行）"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="限制规则" prop="title6">
            <el-input v-model.number="addmbitem.title6" placeholder="请输入" maxlength="20"></el-input>
          </el-form-item>
        </el-form>
      </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 TitleWithCircle from '@/components/top/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'
  import {
    cerePlatformMerchant
  } from '@/api/newly.js'
  import {
    msgedit
  } from '@/api/cereBusinessInfo'
  import {
    AdvertiserInfoEdit
  } from '@/api/advertisement.js'
  import upfile from "@/components/fujianUpload/fujianList"
  export default {
    components: {
      upfile,
      upimg,
      TitleWithCircle
    },
    data() {
      return {
        ruleAddData:{},
        ruleaddmbitem:{
          title1: [{
            required: true,
            message: '请填写字段名称',
            trigger: 'change'
          }],
          title2: [{
            required: true,
            message: '请填写字段key',
            trigger: 'change'
          }],
          title3: [{
            required: true,
            message: '请选择字段类型',
            trigger: 'change'
          }],
          title4: [{
            required: true,
            message: '请选择是否必填',
            trigger: 'change'
          }],
          title5: [{
            required: true,
            message: '请选择字段宽度',
            trigger: 'change'
          }],
          title6: [{
            required: true,
            message: '请填写限制规则',
            trigger: 'change'
          }],
        },
        addmbitem: {
          title1: '',
          title2: '',
          title3: '',
          title4: '',
          title5: '',
          title6: '',
          value: '',
        },
        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: {
          checkState: '2',
          pageNumber: 0,
          pageSize: 1000,
        },
        pageindex: {
          pageNumber: 0,
          pageSize: 20,
        },
        baseURL: 'http://192.168.2.38:9003',
        uploadFiles: [],
        filesLength: 1
      };
    },
    props: {
      info: {
        type: Object,
        default: {}
      }
    },
    async created() {
      console.error({
        ...this.info
      })
      await cerePlatformMerchant(this.shopfrom).then(res => {
        this.shopList = res.data.content
        console.error(this.shopList)
      })
      if (this.info.id) {
        if (this.info.cereBasicInformationShop && this.info.cereBasicInformationShop.id) {
          this.AddData.push(this.info.cereBasicInformationShop)
        }
        if (this.info.cereAdvertisingInformation && this.info.cereAdvertisingInformation.id) {
          this.AddData.push(this.info.cereAdvertisingInformation)
        }
        if (this.info.cereBasicInformationVenue && this.info.cereBasicInformationVenue.id) {
          this.AddData.push(this.info.cereBasicInformationVenue)
        }
        for (let index = 0; index < this.shopList.length; index++) {
          const element = this.shopList[index];
          console.error(element)
          if (element.phone == this.info.applicant) {
            this.shopId = element.id + ''
            this.formInline.relatedMerchants = element.id + ''
            this.formInline.tenantName = element.name
            this.formInline.tenantTelephone = element.phone
          }
        }
      }
    },
    methods: {
      add() {
        console.error({
          ...this.formInline
        })
        return
        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'
                  })
                  if (this.info.id) {
                    if (this.info.cereBasicInformationShop && this.info.cereBasicInformationShop.id) {
                      msgedit({
                        auditStatus: '4',
                        id: this.info.id,
                        contractNumber: this.formInline.contractNumber
                      })
                    }
                    if (this.info.cereAdvertisingInformation && this.info.cereAdvertisingInformation.id) {
                      AdvertiserInfoEdit({
                        auditStatus: '4',
                        id: this.info.id,
                        contractId: this.formInline.contractNumber
                      }).then(item => {
                        this.getAll()
                      })
                    }
                    if (this.info.cereBasicInformationVenue && this.info.cereBasicInformationVenue.id) {
                      msgedit({
                        auditStatus: '4',
                        id: this.info.id,
                        contractNumber: this.formInline.contractNumber
                      })
                    }

                  }
                  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() {
        // return
        this.$refs.addmbitem.validate((valid) => {
            console.log(valid)
            if (valid) {
              this.AddData.push(this.addmbitem)
              this.addmbitem = {
                title1: '',
                title2: '',
                title3: '',
                title4: '',
                title5: '',
                title6: '',
                value: '',
              }
              this.addMing = false
              this.multipleSelection = []
              this.ruleAddData = {}
              for (let index = 0; index < this.AddData.length; index++) {
                const element = this.AddData[index];
                if(element.title4 == '是') {
                  this.ruleAddData[element.title2] = [{
                    required: true,
                    message: '请填写' + element.title1,
                    trigger: 'change'
                  }]
    
                }
                
              }
            } else {
              this.$message({
                message: '请填写完整信息',
                type: 'error'
              })
              return false;
            }
          })
      },
      mingClose() {
        this.multipleSelection = []
        this.ziyuanData = []
        this.addMing = false
      },
      changeRelatedMerchants(e) {
        console.error(e)
        this.shopId = this.shopList[e].id
        this.formInline.tenantName = this.shopList[e].name
        this.formInline.tenantTelephone = this.shopList[e].phone
      },
      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>
