<!--
  @description: 供应商申报材料变更-content
  @Modifier:肖文龙
  @routerPath:
  @date: 2020/5/23-15:41
-->
<template>
  <div>
    <!--标题-->
    <div class="title title_border p0-16">
      <i class="el-icon-s-home" />申报材料变更
    </div>
    <div style="position:relative;">
      <!-- 删除暂存内容 -->
      <div v-if="changeBtn" class="changeRecord">
        当前状态:
        <span style="color:red">暂存</span>
        <el-button type="text" size="mini" @click="deleteInfo">
          [删除暂存内容]
        </el-button>
      </div>
      <!-- tabs -->
      <div v-if="isShow" style="position:relative;">
        <el-tabs v-model="activeName" class="el-tabs-border-card-shadow-none" type="border-card" @tab-click="handleClick">
          <el-tab-pane name="00" label="基本信息">
            <el-scrollbar style="height:calc(100vh - 10px - 40px - 40px - 56px)">
              <essentialInformationChangeEditView v-if="activeName==='00'" :show-status="showStatus" :judge-page-data="judgePageData" @showStatuschage="showStatuschage" />
            </el-scrollbar>
          </el-tab-pane>
          <el-tab-pane name="01" label="业务经办人信息">
            <el-scrollbar style="height:calc(100vh - 10px - 40px - 40px - 56px)">
              <businessManagerInfoChangeEditView
                v-if="activeName==='01'"
                :show-status="showStatus"
                :judge-page-data="judgePageData"
                :change-record="judgePageData.changeRecord"
                @showStatuschage="showStatuschage"
              />
            </el-scrollbar>
          </el-tab-pane>
          <el-tab-pane name="02" label="企业资质">
            <el-scrollbar style="height:calc(100vh - 10px - 40px - 40px - 56px)">
              <enterpriseQualificationChangeEditView v-if="activeName==='02'" :show-status="showStatus" @showStatuschage="showStatuschage" />
            </el-scrollbar>
          </el-tab-pane>
          <el-tab-pane name="03" label="供货记录">
            <el-scrollbar style="height:calc(100vh - 10px - 40px - 40px - 56px)">
              <supplYrecordChangeEditView v-if="activeName==='03'" :show-status="showStatus" @showStatuschage="showStatuschage" />
            </el-scrollbar>
          </el-tab-pane>
          <el-tab-pane name="04" label="财务状况">
            <el-scrollbar style="height:calc(100vh - 10px - 40px - 40px - 56px)">
              <financialSituationEditView v-if="activeName==='04'" :show-status="showStatus" @showStatuschage="showStatuschage" />
            </el-scrollbar>
          </el-tab-pane>
          <!--          &lt;!&ndash; 审核信息 &ndash;&gt;-->
          <!--          <inforaMtionAuditDetail />-->
        </el-tabs>
      </div>
      <!-- 审核状态图片 -->
      <div class="supper_auditStatus">
        <!-- 待审核 -->
        <img v-if="showStatus==='00'" src="@assets/img/common/audit/auditWait.png" alt="">
        <!-- 审核通过 -->
        <img v-if="showStatus==='01'" src="@assets/img/common/audit/auditOk.png" alt="">
        <!-- 审核不通过 -->
        <img v-if="showStatus==='02'" src="@assets/img/common/audit/auditNo.png" alt="">
      </div>
    </div>
  </div>
</template>
<script>
/* api */
import { judgeExistChange, getUpdateDepartInfo, getShowStatus } from '@/api/supplier/supplierBaseInfo'
import { deleteTempSupplierInfo } from '@/api/supplier/supplierChange.js'
/* 组件 */
import essentialInformationChangeEditView from './../essentialInformation/essentialInformationChange-editView'// 审报材料-基本信息
import businessManagerInfoChangeEditView from './../businessManagerInfo/businessManagerInfoChange-editView'// 审报材料-业务经办人信息
import enterpriseQualificationChangeEditView from './../enterpriseQualification/enterpriseQualificationChange-editView'// 审报材料-企业资质
import supplYrecordChangeEditView from './../supplYrecord/supplYrecordChange-editView'// 审报材料-供货记录
import financialSituationEditView from './../financialSituation/financialSituationChange-editView'// 审报材料-财务状况
// import inforaMtionAuditDetail from './../inforaMtionAudit/inforaMtionAudit-detail'// 审报材料-审核信息
export default {
  name: 'EditorDeclarationChangeContent',
  components: {
    essentialInformationChangeEditView, // 审报材料-基本信息
    businessManagerInfoChangeEditView, // 审报材料-业务经办人信息
    enterpriseQualificationChangeEditView, // 审报材料-企业资质
    supplYrecordChangeEditView, // 审报材料-供货记录
    financialSituationEditView // 审报材料-供货记录
    // inforaMtionAuditDetail // 审报材料-审核信息
  },
  provide() {
    return {
      departId: ''
    }
  },
  data() {
    return {
      activeName: '00', // 索引  00 基本信息,01 经办人信息 , 02企业资质 , 03 供货记录, 04 财务状况
      isShow: false, // 是否加载页面 布尔值
      showStatus: '', // 展示状态 00待审核 01审核通过 02审核不通过/驳回
      changeBtn: false, // 按钮控制
      judgePageData: {
        departId: '', // 供应商id
        declarationId: '', // 申报审核携带参数
        isViewPage: '', // 判斷是否是供应商本人登录 空代表是
        departInfoId: '', // 变更提交携带参数
        changeRecord: false // 该节点是否有变更记录
      }
    }
  },
  watch: {
    // 监听tabs切换
    activeName(val) {
      this.getShowStatus()// 查询供应商信息是否有变动
    }
    // $route: {
    //   handler() {
    //     this.initData()// 获取基本信息-判断是否已提交
    //   },
    //   deep: true
    // }
  },
  created() {
    if (this.$route.params.departId) {
      this.judgePageData.departId = this.$route.params.departId
    } else {
      this.judgePageData.departId = ''
    }
    this.initData()// 获取基本信息-判断是否已提交
    // this.JudgeExistChange()// 查询供应商信息是否有变动
  },
  methods: {
    /*
    * 获取基本信息-判断是否已提交
    * @params {departId: departId,declarationId: 申报id,isViewPage: 判断是否为变更数据}
    *  首先查询项目状态 然后在查询基本信息
    */
    async initData() {
      const params = {
        departId: this.judgePageData.departId,
        declarationId: this.judgePageData.declarationId,
        isViewPage: this.judgePageData.isViewPage
      }
      await this.getShowStatus()
      await getUpdateDepartInfo(params).then((response) => {
        const { info } = response.data
        this.judgePageData.departId = info.departId
        //  this.showStatus = showStatus
        this.judgePageData.departInfoId = info.id
        const query = {
          id: info.id, // 供应商departInfo主键
          departId: info.departId // 供应商主键
          // showStatus: showStatus // 显示状态
        }
        this.$router.push({
          query: query
        })
        // 接口已调用-可以加载页面
        this.isShow = true
      })
    },
    // 查询供应商信息是否有变动
    JudgeExistChange() {
      // 初始化
      this.judgePageData.changeRecord = false
      this.judgePageData.isViewPage = ''
      // activeName 00 基本信息,01 经办人信息 , 02企业资质 , 03 供货记录, 04 财务状况
      judgeExistChange(this.activeName).then(res => {
        //  true 有变更记录 false 无变更记录
        this.judgePageData.changeRecord = res.data.hashChange
        this.changeBtn = res.data.auditStatus === '03' ? [] : false
        // if (this.changeBtn) {
        //   this.judgePageData.isViewPage = ''
        // }
        this.judgePageData.isViewPage = this.judgePageData.changeRecord ? '' : '01'
      })
    },
    handleClick(tab, event) {
      // this.getShowStatus()
    },
    // 查询审核图片状态
    showStatuschage() {
      this.getShowStatus()
    },
    deleteInfo() {
      this.$confirm('是否确认刪除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        deleteTempSupplierInfo(this.departId).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 查询供应商状态
    async getShowStatus() {
      await getShowStatus().then(res => {
        this.showStatus = res.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
// 申报图片
.supper_auditStatus{
  position: absolute;
  top: 10px;
  right:100px;

}
// 暂存记录/内容删除按钮
.changeRecord{
  font-size:12px;
  position: absolute;
  top: 0px;
  right: 0px;
  line-height: 40px;
  z-index: 999;
  left: 600px;
}
</style>
