<!--
  @description: 采购人/代理机构-委托代理合同-查看 委托代理合同审核-查看 委托代理合同台账-查看
  @author: 肖文龙
  @routerPath:/consignContract/consignContractDetail
  @date： 2019-11-27 14:17:05
-->
<template>
  <div :class="flowStatus?'main':'p0-16'">
    <!--flowStatus false 待办列表进入 则不显示标题-->
    <section v-if="!flowStatus" class="title">
      <i class="iconfont icon-fanhui pointer" @click="back" />
      {{ titleData.title }}
    </section>
    <!-- 委托合同信息 -->
    <dl class="projectInfoDetail">
      <dt>
        <p class="projectInfoDetail_icon">
          <i class="iconfont icon-xiangmujibenxinxi" />
        </p>
        委托合同基本信息
      </dt>
      <dd>
        <table class="tableData">
          <tr>
            <td>委托合同编码</td>
            <td>{{ formData.contractNo }}</td>
            <td>委托合同名称</td>
            <td>{{ formData.contractName }}</td>
          </tr>
          <tr>
            <td>委托合同类型</td>
            <td>
              <span
                v-for="(item,index) in contractTypeList"
                v-if="formData.contractType===item.typecode"
                :key="index"
              >{{ item.typename }}</span>
            </td>
            <td>收费对象</td>
            <td>
              <span
                v-for="(item,index) in chargedObjectList"
                v-if="formData.chargedObject===item.typecode"
                :key="index"
              >{{ item.typename }}</span>
            </td>
          </tr>
          <tr>
            <td>服务费收取方式</td>
            <td>
              <span
                v-for="(item,index) in serviceChargeList"
                v-if="formData.chargeType===item.typecode"
                :key="index"
              >{{ item.typename }}
              </span>
              {{ formData.chargeValue }}
            </td>
            <td>单标段最低服务费（元）</td>
            <td>{{ formData.minCharge }}</td>
          </tr>
          <tr>
            <td>合同生效日期</td>
            <td>
              {{ formData.takeEffectDate && $Moment(formData.takeEffectDate).format(momentDateTime) }}
            </td>
            <td>合同结束日期</td>
            <td>
              {{ formData.endDate && $Moment(formData.endDate).format(momentDateTime) }}
            </td>
          </tr>
          <tr>
            <td>合同签约日期</td>
            <td>
              {{ formData.signDate && $Moment(formData.signDate).format(momentDateTime) }}
            </td>
            <td />
            <td />
          </tr>
          <tr>
            <td>合同主要内容</td>
            <td colspan="3">
              {{ formData.content }}
            </td>
          </tr>
        </table>
      </dd>
    </dl>
    <!-- 委托人信息 -->
    <dl class="projectInfoDetail">
      <dt>
        <p class="projectInfoDetail_icon">
          <i class="iconfont icon-xiangmujibenxinxi" />
        </p>
        委托人信息
      </dt>
      <dd>
        <table class="tableData">
          <tr>
            <td>委托人</td>
            <td colspan="3">
              {{ formData.consignorName }}
            </td>
          </tr>
          <tr>
            <td>委托人联系人</td>
            <td>{{ formData.consignorLinkman }}</td>
            <td>委托人部门</td>
            <td>{{ formData.consignorDepartment }}</td>
          </tr>
          <tr>
            <td>委托人固定电话</td>
            <td>{{ formData.consignorPhone }}</td>
            <td>委托人手机</td>
            <td>{{ formData.consignorMobile }}</td>
          </tr>
        </table>
      </dd>
    </dl>
    <!-- 代理机构信息 -->
    <dl class="projectInfoDetail">
      <dt>
        <p class="projectInfoDetail_icon">
          <i class="iconfont icon-xiangmujibenxinxi" />
        </p>
        代理机构信息
      </dt>
      <dd>
        <table class="tableData">
          <tr>
            <td>招标代理机构</td>
            <td colspan="3">
              {{ formData.tenderAgent }}
            </td>
          </tr>
          <tr>
            <td>代理机构联系人</td>
            <td>{{ formData.tenderAgentLinkeman }}</td>
            <td>代理机构部门</td>
            <td>{{ formData.tenderAgentDepartment }}</td>
          </tr>
          <tr>
            <td>代理机构固定电话</td>
            <td>{{ formData.tenderAgentPhone }}</td>
            <td>代理机构手机</td>
            <td>{{ formData.tenderAgentMobile }}</td>
          </tr>
        </table>
      </dd>
    </dl>
    <!-- 附件信息 -->
    <dl class="projectInfoDetail">
      <dt>
        <p class="projectInfoDetail_icon">
          <i class="iconfont icon-fujianxinxi" />
        </p>
        附件信息
      </dt>
      <dd>
        <table class="tableData">
          <tr class="singleRow">
            <td>附件</td>
            <td colspan="3">
              <downloadFile :data="upLoadData" />
            </td>
          </tr>
          <tr class="singleRow">
            <td>最终委托合同附件</td>
            <td colspan="3">
              <downloadFile :data="upLoadDataLast" />
            </td>
          </tr>
        </table>
      </dd>
    </dl>
  </div>
</template>

<script>
/* api接口*/
import { getContract } from '@/api/purchasePlan/taskplan'
/* 混合开发方法-参数字段*/
import { consignContractMixin } from '../../mixins/consignContractMixin'// 委托合同公共方法
/* 组件 */
import downloadFile from '@comp/common/updownload/downloadFile'
export default {
  name: 'ConsignContractDetail',
  components: {
    downloadFile
  },
  mixins: [consignContractMixin],
  data() {
    return {
      // 当前标题
      titleData: {
        title: '',
        path: ''
      },
      titleList: [
        {
          title: '查看委托合同',
          path: '/consignContract/consignContractList',
          detailType: '00'
        },
        {
          title: '查看委托合同',
          path: '/consignContract/consignContractLedgerList',
          detailType: '01'
        },
        {
          title: '审批委托合同',
          path: '/consignContract/consignContractAuditList',
          detailType: '02'
        }
      ]
    }
  },
  watch: {
    'formData.chargeType'(n, o) {
      let text = ''
      switch (this.formData.chargeType) {
        case '00':
          text = '%'
          break
        case '01':
          text = '元'
          break
        case '02':
          text = '%'
          break
      }
      this.formData.chargeValue += text
    }
  },
  created() {
    this.upLoadData.bizId = this.consignContractId
    this.upLoadDataLast.bizId = this.consignContractId
    this.initTitle()
    this.initData()
  },
  methods: {
    // 返回按钮
    back() {
      this.$router.push({ path: this.titleData.path })
    },
    // 初始化标题
    initTitle() {
      // 通过路由传值过来的query.detailType字段取到对应的数据
      // 状态值 00 查看委托合同 01 台账查看委托合同 02 审批委托合同
      this.titleList.forEach(item => {
        if (this.$route.params.detailType === item.detailType) {
          this.titleData = item
        }
      })
    },
    // 初始化
    initData() {
      getContract(this.consignContractId).then(response => {
        this.formData = response.data
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
