<script setup>
import { ref } from 'vue'
import { customInterence } from '@/api/api.js'
import {formatTime} from '@/utils/date'
import ICON from '@/utils/icon'

const props = defineProps({
  /* 标题 */
  title: {
    type: String
  },
  isApproval: {
    type: Boolean
  },
  approvalInfo: {
    type: Object
  },
  isLook: {
    type: Boolean,
    default: false
  }
})


</script>

<template>
  <el-dialog
    :model-value="props.isApproval"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    @close="cancelHandle"
    center
    top="5vh"
    v-dialogDrag
    width="1000px"
    class="Capprovaldia_container"
  >
    <template #header>
      <div style="display: flex; alignitems: center">
        <img
          :src="
            props.title == '领取审批'
              ? ICON.pick
              : title == '解冻审批'
              ? ICON.lock
              : ICON.delay
          "
          style="color: #fff; width: 16px; height: 16px; marginright: 5px"
        />
        <span style="fontsize: 16px">{{ props.title }}</span>
      </div>
    </template>

    <div class="dialog_cont">
      <div class="left_cont">
        <div class="detail_info">
          <!-- 领取审批 -->
          <template v-if="title.indexOf('领取审批') != -1">
            <div class="info_item">
              <span>客户名称：{{ props.approvalInfo.CompanyName }}</span>
              <span class="label-style"
                >客户状态：{{ props.approvalInfo.Status }}</span
              >
            </div>
            <div class="info_item">
              <span
                >原&nbsp;&nbsp;销&nbsp;售：{{ props.approvalInfo.SellerName }}</span
              >
              <!-- <span class="label-style">申请时间：{{props.approvalInfo.ApprovalTime}}</span> -->
              <span></span>
            </div>
            <CapprovalPession
              :perssionList="perssionList"
              :approvalTime="props.approvalInfo.ApprovalTime"
            />
            <div class="info_item">
              <span>申请理由：{{ props.approvalInfo.ApplyReasons }}</span>
              <span></span>
            </div>
          </template>
          <!-- 解冻审批 -->
          <template v-else-if="title.indexOf('解冻审批') != -1">
            <div class="info_item">
              <span>客户名称：{{ props.approvalInfo.CompanyName }}</span>
              <span class="label-style"
                >客户状态：{{ props.approvalInfo.Status }}</span
              >
            </div>
            <div class="info_item">
              <span
                >冻结期限：{{ formatTime(props.approvalInfo.FreezeStartDate)}}-{{
                  formatTime(props.approvalInfo.FreezeEndDate)
                }}</span
              >
              <span class="label-style"
                >到期天数：{{ props.approvalInfo.FreezeExpireDays }}</span
              >
            </div>
            <!-- <div class="info_item">
							<span>申请时间：{{props.approvalInfo.ApprovalTime}}</span>
							<span></span>
						</div> -->
            <CapprovalPession
              :perssionList="perssionList"
              :approvalTime="props.approvalInfo.ApprovalTime"
            />
            <div class="info_item">
              <span>解冻理由：{{ props.approvalInfo.ApplyReasons }}</span>
              <span></span>
            </div>
          </template>
          <!-- 延期审批 -->
          <template v-else-if="title.indexOf('延期审批') != -1">
            <div class="info_item">
              <span>客户名称：{{ props.approvalInfo.CompanyName }}</span>
              <span class="label-style"
                >社会信用码：{{ props.approvalInfo.CreditCode }}</span
              >
            </div>
            <div class="info_item">
              <span
                >地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：{{
                  props.approvalInfo.Address
                }}</span
              >
              <span class="label-style"
                >客&nbsp;户&nbsp;状&nbsp;态：{{ props.approvalInfo.Status }}</span
              >
            </div>
            <div class="info_item">
              <span>客户类型：{{ props.approvalInfo.CompanyType }}</span>
              <span class="label-style"
                >客&nbsp;户&nbsp;来&nbsp;源：{{ props.approvalInfo.Source }}</span
              >
            </div>
            <div class="info_item">
              <span
                >行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业：{{
                  props.approvalInfo.IndustryName
                }}</span
              >
              <span class="label-style"
                >所&nbsp;属&nbsp;销&nbsp;售：{{ props.approvalInfo.SellerName }}</span
              >
            </div>
            <!-- <div class="info_item">
							<span>申请时间：{{props.approvalInfo.ApprovalTime}}</span>
							<span></span>
						</div> -->
            <CapprovalPession
              :perssionList="perssionList"
              :approvalTime="props.approvalInfo.ApprovalTime"
            />
            <div class="info_item">
              <span>申请理由：{{ props.approvalInfo.ApplyReasons }}</span>
              <span></span>
            </div>
          </template>
        </div>
        <div class="bot_form">
          <div style="marginbottom: 20px">
            <label
              style="
                marginright: 40px;
                fontsize: 16px;
                position: relative;
                padding-left: 18px;
              "
            >
              <i
                style="
                  color: #f00;
                  fontsize: 20px;
                  position: absolute;
                  left: 0;
                  top: 20%;
                "
                >*</i
              >
              审批状态
            </label>
            <el-radio-group v-model="status" size="medium" :disabled="props.isLook">
              <el-radio label="通过"></el-radio>
              <el-radio label="驳回" style="marginleft: 0"></el-radio>
            </el-radio-group>
          </div>
          <div v-if="status == '驳回'">
            <label
              style="
                display: block;
                marginbottom: 10px;
                fontsize: 16px;
                position: relative;
                padding-left: 18px;
              "
            >
              <i
                style="
                  color: #f00;
                  fontsize: 20px;
                  position: absolute;
                  left: 0;
                  top: 20%;
                "
                >*</i
              >
              驳回理由
            </label>
            <el-input
              type="textarea"
              v-model="reason"
              rows="4"
              style="width: 100%"
              placeholder="输入理由"
              :disabled="props.isLook"
            ></el-input>
          </div>
        </div>
      </div>
      <!-- 时间线 -->
      <div class="line_cont">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :timestamp="activity.CreateTime"
            color="#409EFF"
            placement="top"
          >
            {{ activity.SysRealName + activity.Remark }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <div style="display: flex; justify-content: center; margin: 60px 0 50px">
      <!-- 只查看 -->
      <el-button
        type="primary"
        style="width: 80px"
        @click="cancelHandle"
        v-if="props.isLook"
        >关闭</el-button
      >
      <template v-else>
        <el-button
          type="primary"
          style="width: 80px; marginright: 24px"
          @click="saveHandle"
          >确定</el-button
        >
        <el-button
          type="primary"
          plain
          style="width: 80px"
          @click="cancelHandle"
          >取消</el-button
        >
      </template>
    </div>
  </el-dialog>
</template>

<style lang='scss'>
.Capprovaldia_container {
	* {box-sizing: border-box;}
	.dialog_cont {
		display: flex;
		justify-content: space-between;
		.left_cont {
			width: 70%;
			.detail_info {
				border: 1px solid #AAB4CC;
				border-radius: 4px;
				padding: 30px 20px;
				.info_item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 16px;
					color: #666;
					margin-bottom: 15px;
					.label-style {
						width:260px;
					}
					&:last-child {
						margin-bottom: 0;
					}
				}
			}
			.bot_form {
				margin-top: 30px;
			}
		}
		.line_cont {
			box-sizing: border-box;
			min-width: 25%;
			height: 362px;
			overflow-y: auto;
			padding: 28px 14px;
			border: 1px solid #AAB4CC;
			border-radius: 4px;
			.el-timeline-item__tail {
				border-color: #409EFF;
			}
			.el-timeline-item__timestamp.is-top {
				color: #999;
				margin-bottom: 4px;
			}
			.el-timeline-item__content {
				color: #999;
			}
		}
	}
}
</style>