<template>
  <div class="">
    <!-- 卡片 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span v-if="shopDetails.checkState == 2" class="leftTitle">已拒绝</span>
        <span v-else-if="shopDetails.checkState == 1" class="leftTitle">已通过</span>
        <span v-else-if="shopDetails.checkState == 0" class="leftTitle">未处理</span>
        <span v-else 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">
                <span v-if="shopDetails.authenType == 1">分公司</span>
                <span v-else-if="shopDetails.authenType == 2">策划师</span>
                <span v-else>--</span>
                信息
              </p>
              <p class="detail_text">
                <span>账号类型：</span>
                <span v-if="shopDetails.authenType == 1">分公司</span>
                <span v-else-if="shopDetails.authenType == 2">策划师</span>
                <span v-else>--</span>
              </p>
              <p class="detail_text">
                <span>平台登录账号：</span>
                <span>{{ shopDetails.username || '--' }}</span>
              </p>
              <p class="detail_text">
                <span>密码：</span>
                <span>{{ shopDetails.password || '--' }}</span>
              </p>
              <p class="detail_text">
                <span>昵称：</span>
                <span>{{ shopDetails.name || '--' }}</span>
              </p>
              <p class="detail_text">
                <span>性别：</span>
                <span>{{ shopDetails.sex || '--' }}</span>
              </p>
              <p class="detail_text">
                <span>账户手机号：</span>
                <span>{{ shopDetails.phone || '--' }}</span>
              </p>
              <p class="detail_text">
                <span>邮箱：</span>
                <span>{{ shopDetails.email || '--' }}</span>
              </p>
              <p class="detail_text">
                <span>用户详细地址：</span>
                <span>{{ shopDetails.address || '--' }}</span>
              </p>
              <p class="detail_text">
                <span>申请时间：</span>
                <span>{{ shopDetails.createTime || '--' }}</span>
              </p>
              <p class="detail_text">
                <span>生效日期：</span>
                <span>{{ shopDetails.effectiveDate || '--' }}</span>
              </p>
              <p class="detail_text">
                <span>生效时限：</span>
                <span v-if="shopDetails.effectiveYear">{{ shopDetails.effectiveYear }}年</span>
                <span v-else>--</span>
              </p>
              <p class="detail_text">
                <span>合同状态：</span>
                <span v-if="shopDetails.contractState === 0">无效</span>
                <span v-else-if="shopDetails.contractState === 1">有效</span>
                <span v-else>--</span>
              </p>
              <p class="detail_text">
                <span>认证状态：</span>
                <span v-if="shopDetails.authenticationState == 1">未认证</span>
                <span v-else-if="shopDetails.authenticationState == 2">审核中</span>
                <span v-else-if="shopDetails.authenticationState == 3">审核通过</span>
                <span v-else-if="shopDetails.authenticationState == 4">审核失败</span>
                <span v-else-if="shopDetails.authenticationState == 5">签约成功（使用中）</span>
                <span v-else>--</span>
              </p>
              <p class="detail_text">
                <span>入驻处理状态：</span>
                <span v-if="shopDetails.checkState == 0">未处理</span>
                <span v-else-if="shopDetails.checkState == 1">通过</span>
                <span v-else-if="shopDetails.checkState == 2">拒绝</span>
                <span v-else>--</span>
              </p>
              <p class="detail_text">
                <span>是否支付：</span>
                <span v-if="shopDetails.isPay == 1">待支付</span>
                <span v-else-if="shopDetails.isPay == 2">已支付</span>
                <span v-else>--</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.checkHandeffectiveDatele">
              <el-radio :label="null">即时生效</el-radio>
              <el-radio :label="0">指定日期</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="addForm.checkHandeffectiveDatele === 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 { getPlatformUserCheckHandleAdditional } from '@/api/branchOfficeManagement/settlementApplication'

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

<style lang="scss" scoped>
.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;
			}
		}
	}
}

.spanIpt {
	width: 60%;
}

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