<!--  -->
<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="pdl" v-if="addVisible==false">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>商城商家管理</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">商城入驻审核</span></div>
      </div>
      <!-- 选项卡 -->
      <el-tabs v-model="activeName" @tab-click="handleClick" >
        <el-tab-pane label="待处理" name="0" />
        <el-tab-pane label="已通过" name="1" />
        <el-tab-pane label="已拒绝" name="2" />
      </el-tabs>
      <!-- 搜索 -->
      <div class="formSearch">
        <el-form :inline="true" :model="formInline">
          <el-form-item label="商家名称">
            <el-input
              v-model="formInline.shopName"

               style="width: 180px;margin-right: 15px"
              placeholder="请输入商家名称"
            />
          </el-form-item>
          <el-form-item label="注册手机号">
            <el-input
              v-model="formInline.shopPhone"

               style="width: 180px;margin-right: 15px"
              placeholder="请输入注册手机号"
            />
          </el-form-item>
          <el-form-item label="店铺类型">
            <el-select
              v-model="formInline.authenType"

               style="width: 180px;margin-right: 15px"
              clearable
              placeholder="请选择"
            >
              <el-option label="个体工商户" value="2" />
              <el-option label="企业" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="申请时间">
            <el-date-picker
              v-model="formInline.dates"
               style="width: 180px;margin-right: 15px"
              type="datetimerange"
              value-format="yyyy-MM-dd"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              prefix-icon="none"
            />
          </el-form-item>
          <el-form-item>
            <el-button  @click="search" style="background-color: #3F9B6A;color: #fff">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="tableData"
           :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
          tooltip-effect="dark"

        >
          <el-table-column label="商家名称" min-width="220">
            <template slot-scope="scope">{{ scope.row.shopName }}</template>
          </el-table-column>
          <el-table-column label="店铺类型">
            <template slot-scope="scope">
              <span v-if="scope.row.authenType == 2">个体工商户</span>
              <span v-if="scope.row.authenType == 3">企业</span>
            </template>
          </el-table-column>
          <el-table-column prop="shopPhone" label="注册手机号" />
          <el-table-column prop="createTime" label="申请时间" show-overflow-tooltip/>
          <el-table-column label="操作" fixed="right" width="180">
            <template slot-scope="scope">
              <div class="btnList">
                <div class="tableBtn greens"  @click="handleDel(scope.row,true)" v-if="activeName == 0">
                  处理
                </div>
                <div class="tableBtn greens"  @click="handleDel(scope.row,false)"   v-if="activeName == 1 || activeName == 2">
                  查看
                </div>
                <div class="tableBtn greens"  @click="delet(scope.row)"  v-if="activeName == 1 || activeName == 2">
                  删除
                </div>
                <!-- <div class="tableBtn greens"    v-if="activeName == 1" @click="luru(scope.row)">
                  录入合同
                </div> -->
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination
            :current-page="formInline.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            background
            small
            layout="total, prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
	
     
    </div>
    <el-dialog :visible.sync="hetongBox" custom-class='bian_css xiang_css' style="padding: 0;" width="70%" center
      :close-on-click-modal="false" :show-close="false">
      <div style="padding:20px;">
        <div style="font-size: 14px;padding: 20px 0;color: #000;">合同录入</div>
        <div>
          <el-descriptions class="margin-top" :column="3" border :labelStyle="labelStyle"
           :contentStyle="contentStyle">
            <el-descriptions-item>
              <template slot="label">
                合同编号
              </template>
              <el-input v-model="heForm.contractNumber" placeholder="请输入" style="width:100%;" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                标段号
              </template>
              <el-input v-model="heForm.sectionNumber" placeholder="请输入" style="width:100%;" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                合同名称
              </template>
              <el-input v-model="heForm.contractName" placeholder="请输入" style="width:100%;" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                合同金额
              </template>
              <el-input v-model="heForm.contractAmount" placeholder="请输入" style="width:100%;" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                保证金
              </template>
              <el-input v-model="heForm.earnestMoney" placeholder="请输入" style="width:100%;" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                合同签订日期
              </template>
              <el-input v-model="heForm.contractSigningDate" placeholder="请输入" style="width:100%;" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                合同终止日期
              </template>
              <el-input v-model="heForm.contractTerminationDate" placeholder="请输入" style="width:100%;" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                起租日期
              </template>
              <el-input v-model="heForm.leaseStartDate" placeholder="请输入" style="width:100%;" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                出租人名称
              </template>
              <el-input v-model="heForm.lessorName" placeholder="请输入" style="width:100%;" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                联系电话
              </template>
              <el-input v-model="heForm.telephone" placeholder="请输入" style="width:100%;" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                银行账号
              </template>
              <el-input v-model="heForm.bankAccount" placeholder="请输入" style="width:100%;" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                承租人名称
              </template>
              <el-input v-model="heForm.tenantName" placeholder="请输入" style="width:100%;" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                承租人联系电话
              </template>
              <el-input v-model="heForm.tenantTelephone" placeholder="请输入" style="width:100%;" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                承租人银行账号
              </template>
              <el-input v-model="heForm.tenantBankAccount" placeholder="请输入" style="width:100%;" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                商铺编号
              </template>
              <el-input v-model="heForm.shopNumber" placeholder="请输入" style="width:100%;" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                商铺名称
              </template>
              <el-input v-model="heForm.shopName" placeholder="请输入" style="width:100%;" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                商铺地址
              </template>
              <el-input v-model="heForm.shopAddress" placeholder="请输入" style="width:100%;" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                商铺面积
              </template>
              <el-input v-model="heForm.shopArea" placeholder="请输入" style="width:100%;" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                商铺业态
              </template>
              <el-input v-model="heForm.storeFormats" placeholder="请输入" style="width:100%;" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                经营项目
              </template>
              <el-input v-model="heForm.businessProjects" placeholder="请输入" style="width:100%;" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                合同附件
              </template>
              <el-upload class="video-uploader" :action="uploadFileUrl" :on-remove="hefuRemove"
                :on-success="hefuSuccess" :auto-upload="true" :file-list="hefuData">
                <div slot="trigger" style="color:#3f9b6a"  v-if="hefuData.length==0"> +点击上传</div>
              </el-upload>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div style="padding-top:20px;display:flex;justify-content: flex-end;">
          <el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
            @click="closeFn()">返回</el-button>
          <el-button @click="addCheck()" style="background-color: #3F9B6A;color: #fff">确认</el-button>
        </div>
      </div>
    </el-dialog>

	  <AddSettlement
	  v-if="addVisible"
	    v-loading="loading"
	    :business-data="form"
      :flag="flag"
	    @cancel="cleanForm"
	    @search="search"
	  />
  </div>
</template>

<script>
import AddSettlement from '@/views/shopbus/settlement/addSettlement'

import {
  settlementGetAll,
  settlementDelete
} from '@/api/business'
import {
  settlementGetById
} from '@/api/business'
import {
  contractAdd
} from '@/api/manage'
  import {
    uploadUrl
  } from '@/utils/request'
export default {
  components: {
    AddSettlement
  },
  data() {
    // 这里存放数据
    return {
      uploadFileUrl: uploadUrl, // 请求地址
      activeName: '0',
      formInline: {
        shopName: '', // 商家名称
        shopPhone: '', // 注册手机号
        authenType: '', // 店铺类型 1-个人 2-个体工商户 3-企业 4-其他组织
        dates: [], // 时间数组
        checkState: '0', // 入驻处理状态 0-未处理 1-通过 2-拒绝
        page: 1,
        pageSize: 10
      },
      total: 10,
      tableData: [],
      addVisible: false,
      loading: false,
      form: {},
      hetongBox:false,
      contentStyle:{
        width:'20%',
        height:'42px',
      },
      labelStyle:{
        width:'150px',
        height:'42px',
        color:'#000',
      },
      heForm: {
        contractNumber: '', //合同对应的ID
        sectionNumber: '',
        contractName: '',
        contractAmount: '',
        earnestMoney: '',
        contractSigningDate: '',
        contractTerminationDate: '',
        leaseStartDate: '',
        lessorName: '',
        telephone: '',
        bankAccount: '',
        tenantName: '',
        tenantTelephone: '',
        tenantBankAccount: '',
        shopNumber: '',
        shopName: '',
        shopAddress: '',
        shopArea: '',
        storeFormats: '',
        businessProjects: '',
        appendicesContract: '',
        renewalTime: '', //续约时间
        associatedEvents: '', //关联事件
        relatedMerchants: '', //关联商家
        contractType: '', //合同类型
        contractStatus: '', //合同状态
        dataStatus: '1', //数据状态（1.使用中  2.往期合同 3.已终止）
      }, //合同字段
      hefuData:[],
      flag:false
    }
  },
  mounted () {
    this.getAll(this.formInline)
  },
  // 方法集合
  methods: {
    handleSizeChange (val) {
      this.formInline.pageSize = val
      this.getAll(this.formInline)
    },
    handleCurrentChange (val) {
      this.formInline.page = val
      this.getAll(this.formInline)
    },
    handleClick (tab, event) {
      this.formInline.checkState = tab.index
      this.getAll(this.formInline)
    },
    // 查询
    search () {
      this.total = 1
      this.formInline.page = 1


      this.getAll(this.formInline)
    },
    // 处理
    handleDel (row,flag) {
      this.addVisible = true
      this.flag = flag
      this.getFormData(row.shopId)
    },
    getFormData (shopId) {
      this.loading = true
      // 查询店铺详情
      settlementGetById({ shopId })
        .then(res => {
          this.loading = false
          this.form = res.data
        })
        .catch(err => {
          this.loading = false
          console.log(err)
        })
    },
    cleanForm () {
      this.addVisible = false
    },
    // 删除
     delet (row) {

              const h = this.$createElement;
                      this.$msgbox({
                        title: '消息',
                        message: h('p', null, [
                          h('span', null, '是否删除当前商家'),
                        ]),
                        showCancelButton: true,
                        showClose:false,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        customClass:'oe-dialog-btn',
                        beforeClose: (action, instance, done) => {
                          if (action === 'confirm') {
                            settlementDelete({ checkId: row.checkId }).then(res=>{
                               this.getAll(this.formInline)
                              done();
                            })
                          } else {
                            done();
                          }
            }
            })


      // const res = await settlementDelete({ checkId: row.checkId })
      // if (res.code === '') {
      //   this.$message({
      //     message: '删除成功',
      //     type: 'success'
      //   })
      //   this.getAll(this.formInline)
      // }
    },
    // 初始化查询所有数据
    async getAll (formInline) {
      const res = await settlementGetAll(formInline)
      this.tableData = res.data.list
      this.total = res.data.total

    },
    luru(item){
      this.hetongBox = true
      this.heForm= {

          contractNumber: '', //合同对应的ID
          sectionNumber: '',
          contractName: '',
          contractAmount: '',
          earnestMoney: '',
          contractSigningDate: '',
          contractTerminationDate: '',
          leaseStartDate: '',
          lessorName: '',
          telephone: '',
          bankAccount: '',
          tenantName: '',
          tenantTelephone: '',
          tenantBankAccount: '',
          shopNumber: '',
          shopName: '',
          shopAddress: '',
          shopArea: '',
          storeFormats: '',
          businessProjects: '',
          appendicesContract: '',
          renewalTime: '', //续约时间
          associatedEvents: '', //关联事件
          relatedMerchants: '', //关联商家
          contractType: '', //合同类型
          contractStatus: '', //合同状态
          dataStatus: '1', //数据状态（1.使用中  2.往期合同 3.已终止）
      }
      this.heForm.relatedMerchants = item.id
    },
    closeFn(){
       this.hetongBox = false
    },
   async addCheck(){
      if(this.hefuData.length !=0){
         this.heForm.appendicesContract = JSON.stringify(this.hefuData[0])
      }

      await contractAdd(this.heForm)
        this.hetongBox = false
    },
    hefuRemove() {
      this.hefuData = []
    },
    hefuSuccess(response, file, fileList) {
      const fileMsg = {
        name: file.name,
        url: file.response.data.url,
      }
      // 将文件地址存储在 uploadedFiles 数组中
      this.hefuData.push(fileMsg)
    },
  }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
@import url("../../../styles/elDialog.scss");
.pdl {
  padding: 0 20px 20px 20px;
  background: #fff;
  min-height: calc(100vh - 50px - 20px);
}

          ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
           background-color: #3F9B6A;
         }
         ::v-deep .el-input__inner:focus {
              border: #3F9B6A 1px solid;
           }
           .tableBtn {
             display: inline-block;
             margin-right: 10px;
             cursor: pointer;
           }

           .greens {
             color: #3F9B6A;
           }
           ::v-deep .buttonHover:hover {
             color: #3f9b6a !important;
             border-color: #c5e1d2 !important;
             background-color: #ecf5f0 !important;
             outline: none;
           }

           ::v-deep .el-pagination__total {
             position: absolute;
             left: 10px;
           }
           ::v-deep .xiang_css {
             height: auto;
             margin-left: 15%;

             .el-dialog__header {
               padding: 0px;
             }

             .el-input__inner {
               height: 18px;
               border: 0px;
               margin-top: 0px;
             }

             .el-input__inner:hover {
               border: 0px;
             }

             .el-input__inner:focus {
               border: 0px;
             }
           }

</style>
