<template>
  <div class="">
    <!-- 卡片 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span v-if="shopDetails.checkState === 2" class="leftTitle">已拒绝</span>
        <span v-if="shopDetails.checkState === 1" class="leftTitle">已通过</span>
        <span v-if="shopDetails.checkState === 0" class="leftTitle">未处理</span>
        <div class="girhtBtn">
          <el-button class="" @click="back">
            取消
          </el-button>
          <el-button v-if="shopDetails.checkState === 0" type="primary" @click="handle">
            处理
          </el-button>
        </div>
      </div>
      <!--  卡片内容-->
      <div>
        <div class="msgDetail">
          <div class="detail">
            <div class="shop_info">
              <p class="detail_title">店铺信息</p>
              <p class="detail_text">
                <span>
                  <font>*</font>店铺名称：
                </span>
                <span>{{ shopDetails.shopName }}</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font>店铺类型：
                </span>
                <span v-if="shopDetails.authenType == 1">个人</span>
                <span v-if="shopDetails.authenType == 2">个体工商户</span>
                <span v-if="shopDetails.authenType == 3">企业</span>
                <span v-if="shopDetails.authenType == 4">其他组织</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font>
                  客服电话：
                </span>
                <span>{{ shopDetails.shopPhone }}</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font>店铺负责人：
                </span>
                <span>{{ shopDetails.chargePersonName }}</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font>负责人电话：
                </span>
                <span>{{ shopDetails.chargePersonPhone }}</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font>店铺地址：
                </span>
                <span>{{ shopDetails.shopAdress }}</span>
              </p>
            </div>
            <div class="person_info">
              <p class="detail_title">个人信息</p>
              <p class="detail_text">
                <span>
                  <font>*</font>名称：
                </span>
                <span>{{ shopDetails.name }}</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font>证件信息：
                </span>
                <span>{{ shopDetails.cardTypeName }}</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font>身份证号码：
                </span>
                <span>{{ shopDetails.idCard }}</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font>身份证有效期：
                </span>
                <span>{{ shopDetails.cardTime }}</span>
              </p>
              <p class="detail_img">
                <span>
                  <font>*</font>证件照片:
                </span>
                <el-image
                  v-for="(src, index) in idCardCopyFilePath" :key="'id' + index" class="img_box"
                  :preview-src-list="idCardCopyFilePath" :src="src" :preview="2" alt=""
                />
              </p>
              <p v-if="shopDetails && shopDetails.authenType === 1" class="detail_img">
                <span>
                  <font>*</font>手持证件照:
                </span>
                <el-image class="img_box" :src="shopDetails.cardHand" :preview-src-list="[ shopDetails.cardHand ]" />
              </p>
            </div>
            <!-- +++++++++++++++++++++ 主体信息 ++++++++++++++++++++++++++++++++++++++++++++++++ -->
            <div v-if="shopDetails.authenType !== 1" class="person_info">
              <p class="detail_title">主体信息</p>
              <p class="detail_text">
                <span v-if="shopDetails.authenType == 2">
                  <font>*</font> 商户名称：
                </span>
                <span v-if="shopDetails.authenType == 3">
                  <font>*</font> 企业名称：
                </span>
                <span v-if="shopDetails.authenType == 4">
                  <font>*</font> 组织名称：
                </span>
                <span>{{ shopDetails.subjectName }}</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font> {{ shopDetails.authenType == 4 ? '组织机构代码' : '社会信用代码' }}：
                </span>
                <span>{{ shopDetails.subjectCode }}</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font>注册地址
                </span>
                <span>{{ shopDetails.subjectAdress }}</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font>营业期限
                </span>
                <span>{{ shopDetails.subjectStartTime }} - {{ shopDetails.subjectEndTime }}</span>
              </p>
              <p class="detail_img">
                <span>
                  <font>*</font>{{ shopDetails.authenType == 4 ? '机构证明材料' : '营业执照' }}：
                </span>
                <img
                  v-for="(src, index) in shopDetails.subjectLicense" :key="'id' + index" :src="src" :preview="2"
                  alt=""
                >
              </p>
            </div>
            <div class="person_info">
              <p class="detail_title">授权信息</p>
              <p class="detail_text">
                <span>
                  <font>*</font>生效日期：
                </span>
                <span>{{ shopDetails.effectiveDate }}</span>
              </p>
              <p class="detail_text">
                <span>
                  <font>*</font>生效时限：
                </span>
                <span>{{ shopDetails.effectiveYear }}</span>
                <span v-if="shopDetails.effectiveYear">年</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- *************对话框开始************* -->
    <el-dialog
      title="处理申请" :visible.sync="addFormDialog" width="30%" center
      :show-close="false"
      :close-on-click-modal="false" :modal-append-to-body="false" :modal="false"
    >
      <div>
        <el-form ref="ruleForm" :model="addForm" label-width="80px">
          <el-form-item label="入驻处理">
            <el-radio-group v-model="addForm.checkHandle" @change="selectChoose">
              <el-radio label="1">同意入驻</el-radio>
              <el-radio label="0">拒绝入驻</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="addForm.checkHandle == 0" label="拒绝原因">
            <el-input v-model="addForm.reason" maxlength="200" type="textarea" />
          </el-form-item>
          <el-form-item v-if="addForm.checkHandle == 1" label="生效日期">
            <el-radio-group v-model="addForm.effectiveDate">
              <el-radio label="null">即时生效</el-radio>
              <el-radio label="0">指定日期</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="addForm.effectiveDate == 0 && addForm.checkHandle == 1">
            <el-date-picker v-model="chooseDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />
          </el-form-item>
          <el-form-item v-if="addForm.checkHandle == 1" label="生效时间">
            <el-input
              v-model="addForm.effectiveYear" maxlength="4" oninput="value=value.replace(/[^\d]/g,'')"
              class="spanIpt"
            />
            <span class="riSpan">年</span>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addFormDialog = false">取 消</el-button>
        <el-button type="primary" @click="handle_save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { settlementHandle } from '@/api/business'
import { hidden } from '@/utils'

export default {
  props: {
    businessData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    // 这里存放数据
    return {
      shopId: '',
      shopDetails: {},
      addFormDialog: false,
      idCardCopyFilePath: [],
      chooseDate: '',
      addForm: {
        shopId: '', // 店铺id
        checkHandle: '', // 1-同意入驻 0-拒绝入驻
        effectiveDate: '', // 生效日期  null-即时生效 有值-指定日期生效
        effectiveYear: '', // 生效时限（年）
        reason: '' // 处理原因
      }
    }
  },
  watch: {
    businessData: {
      handler(nVal, oVal) {
        this.shopDetails = {}
        this.idCardCopyFilePath = []
        this.shopId = nVal.shopId
        this.shopDetails = nVal
        this.shopDetails.idCard = hidden(this.shopDetails.idCard, 4, 4)
        this.idCardCopyFilePath.push(nVal.cardPositive)
        this.idCardCopyFilePath.push(nVal.cardSide)
      }
    }
  },
  created() {
    this.shopDetails = {}
    this.idCardCopyFilePath = []
    this.shopId = this.businessData.shopId
    this.shopDetails = this.businessData
    this.shopDetails.idCard = hidden(this.shopDetails.idCard, 4, 4)
    this.idCardCopyFilePath.push(this.businessData.cardPositive)
    this.idCardCopyFilePath.push(this.businessData.cardSide)
  },
  // 方法集合
  methods: {
    // 处理
    handle() {
      this.addFormDialog = true
    },
    // 返回
    back() {
      this.$emit('cancel')
    },
    // selectChoose
    selectChoose(index) {
      if (index !== 1) {
        this.addForm.effectiveDate = ''
        this.addForm.effectiveYear = ''
        this.chooseDate = ''
      }
    },
    clearAddForm() {
      this.addForm = {
        shopId: '', // 店铺id
        checkHandle: '', // 1-同意入驻 0-拒绝入驻
        effectiveDate: '', // 生效日期  null-即时生效 有值-指定日期生效
        effectiveYear: '', // 生效时限（年）
        reason: '' // 处理原因
      }
    },
    // 处理申请确定
    async handle_save() {
      if (this.addForm.checkHandle === '') {
        this.$message.error('请选择入驻处理')
        return
      }
      if (this.addForm.effectiveDate === '' && this.addForm.checkHandle === 1) {
        this.$message.error('请选择生效日期')
        return
      }
      if (this.addForm.effectiveYear === '' && this.addForm.checkHandle === 1) {
        this.$message.error('请输入生效时间')
        return
      }
      if (this.addForm.effectiveDate !== 'null') {
        this.addForm.effectiveDate = this.chooseDate
      } else {
        this.addForm.effectiveDate = 'null'
      }
      this.addForm.shopId = this.shopId
      const loading = this.$loading({
        lock: true,
        text: '处理中请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const res = await settlementHandle(this.addForm)
      this.addFormDialog = false
      if (res.code === '') {
        this.shopDetails = {}
        this.idCardCopyFilePath = []
        this.$message({
          message: '处理成功',
          type: 'success'
        })
        this.clearAddForm()
        this.$emit('cancel')
        this.$emit('search')
      } else {
        console.log('error')
      }
      loading.close()
    }
  }
}
</script>

<style
  lang="scss"
  scoped
>
//@import url(); 引入公共css类
.clearfix {
	.leftTitle {
		font-size: 24px;
		color: #333333;
	}

	.girhtBtn {
		float: right;
	}
}

.detail {
	min-height: 500px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.15);
	border-radius: 4px;
	padding: 1px 50px 20px;
	margin-top: 15px;

	.detail_title {
		font-size: 24px;
		color: #333333;
		position: relative;
		margin: 50px 20px 20px;

		font {
			color: #ff7911;
		}

		&:before {
			content: "";
			display: block;
			position: absolute;
			top: 5px;
			left: -20px;
			width: 4px;
			height: 24px;
			background-color: #3a68f2;
		}
	}

	.detail_text {
		line-height: 40px;

		span {
			display: inline-block;
			color: #333333;
			font-size: 16px;

			&:nth-child(1) {
				width: 150px;
				text-indent: 20px;

				font {
					color: red;
				}
			}

			&:nth-child(2) {
				color: #666666;
			}
		}
	}

	.detail_img {
		position: relative;
		line-height: 40px;
		margin-bottom: 30px;
		overflow: hidden;

		span {
			position: absolute;
			top: 0;
			left: 0;
			display: inline-block;
			color: #333333;
			font-size: 16px;
			width: 150px;
			text-indent: 20px;

			font {
				color: #ff7911;
			}
		}

		.img_box {
			width: 265px;
			height: 170px;
			border-radius: 4px;
			float: left;

			&:nth-of-type(1) {
				margin: 0 30px 0 150px;
			}
		}
	}
}

.spanIpt {
	width: 60%;
}

.riSpan {
	margin-left: 10px;
}
</style>
