<template>
  <div v-if="detail">
    <!--    合同详情-->
    <xy-dialog :is-show.sync="isShowDetail" type="normal" title="详情" class="contract-detail">
      <template v-slot:normalContent>
        <div class="base-info">
          <div class="base-info-title">项目基本信息</div>
          <div class="base-info-item">
            <div class="base-info-item-title">项目名称</div>
            <div class="base-info-item-content">{{detail.name}}</div>
          </div>
          <div class="base-info-item">
            <div class="base-info-item-title">项目类型</div>
            <div class="base-info-item-content">{{typeFormatter(detail.type)}}</div>
          </div>
          <div style="display: flex;justify-content: space-between;">
            <div class="base-info-item" style="flex-basis: 50%">
              <div class="base-info-item-title">采购形式</div>
              <div class="base-info-item-content">{{detail.purchase_way?detail.purchase_way.value:'无'}}</div>
            </div>
            <div class="base-info-item" style="flex-basis: 50%">
              <div class="base-info-item-title">采购方式</div>
              <div class="base-info-item-content">{{detail.purchase_type?detail.purchase_type.value:'无'}}</div>
            </div>
          </div>
          <div style="display: flex;justify-content: space-between;">
            <div class="base-info-item" style="flex-basis: 50%">
              <div class="base-info-item-title">签订时间</div>
              <div class="base-info-item-content">{{detail.date}}</div>
            </div>
            <div class="base-info-item" style="flex-basis: 50%">
              <div class="base-info-item-title">服务时间</div>
              <div class="base-info-item-content">{{detail.start_date}}至{{detail.end_date}}</div>
            </div>
          </div>
          <div class="base-info-item">
            <div class="base-info-item-title">项目预算</div>
            <div class="base-info-item-content">{{moneyFormat(detail.plan_price)}}</div>
            <div class="base-info-item-unit">(元)</div>
          </div>
          <div class="base-info-item">
            <div class="base-info-item-title">资金渠道</div>
            <div class="base-info-item-content">{{moneyWayFormatter(detail.money_way_detail)}}</div>
          </div>
        </div>
        <div class="link-budget-plan">
          <div class="link-budget-plan-title">关联预算计划</div>
          <xy-table :height="260" :isPage='false' :table-item="linkBudgetPlanTable" :show-index="false" :list="detail.plans">
            <template v-slot:btns>
              <div></div>
            </template>
          </xy-table>
        </div>
        <div class="sign-info">
          <div class="sign-info-title">签订信息</div>
          <div class="sign-info-item">
            <div class="sign-info-item-title">合同金额</div>
            <div class="sign-info-item-content">{{moneyFormat(detail.money)}}</div>
            <div class="sign-info-item-unit">（元）</div>
          </div>
          <div style="display: flex;justify-content: space-between">
            <div class="sign-info-item" style="flex-basis: 50%">
              <div class="sign-info-item-title">承包商\供应商</div>
              <div class="sign-info-item-content">{{detail.supply}}</div>
            </div>
            <div class="sign-info-item" style="flex-basis: 50%">
              <div class="sign-info-item-title">执行部门</div>
              <div class="sign-info-item-content">{{detail.carry_department}}</div>
            </div>
          </div>
        </div>
        <div class="related-processes">
          <div class="related-processes-title">相关流程进展查看</div>
          <div class="related-processes-item">
            <div @click="seeBuyProcess" :style="{'color':detail.purchase_last_flow_id ? 'green' : 'red'}">采购流程查看</div>
            <div @click="seeSignProcess" :style="{'color':detail.join_last_flow_id ? 'green' : 'red'}">合同会签流程查看</div>
            <template v-if="detail.purchase_way?detail.purchase_way.remark === 'true':false">
              <div @click="seeBidding" :style="{'color':detail.invite_last_flow_id ? 'green' : 'red'}">招标审批流程查看</div>
            </template>
            <template v-if="detail.is_plan != 1">
              <div @click="seeAskProcess" :style="{'color':detail.req_last_flow_id ? 'green' : 'red'}">请示流程查看</div>
            </template>
          </div>
        </div>
        <div class="journal">
          <div class="journal-title">日志</div>
          <xy-table :height="240" :isPage='false' :table-item="journalTable" :list="detail.log" :show-index="false">
            <template v-slot:btns>
              <div></div>
            </template>
          </xy-table>
        </div>
      </template>

      <template v-slot:footerContent>
        <Button type="primary" @click='isShowDetail=false'>关闭</Button>
      </template>
    </xy-dialog>

  </div>
</template>

<script>
  import {
    show as detailContract,
    getOatoken
  } from "@/api/contract.js";
  import {
    parseTime
  } from "@/utils"
  import {
    Message
  } from "element-ui";
  import {
    moneyFormatter
  } from "@/utils"
  import {
    getparameter
  } from "@/api/system/dictionary";

  export default {
    components: {

    },
    data() {
      return {
        window: {
          width: 0,
          height: 0,
          top: 0,
          left: 0
        },

        //合同详情
        id: '',
        detail: null,
        isShowDetail: false,
        linkBudgetPlanTable: [{
            label: "ID",
            sortable: false,
            prop: 'id',
            width: 130
          },
          {
            label: "类型",
            width: 100,
            sortable: false,
            customFn: (row) => {
              const typeSwitch = (type) => {
                {
                  let res = this.planTypes.filter(item => {
                    return item.id === type
                  })
                  return res[0]?.value || '未知'
                }
              }
              return ( <
                div >
                <
                Tag color = "primary" > {
                  typeSwitch(row.type)
                } <
                /Tag> <
                /div>
              )
            }
          },
          {
            label: "项目",
            width: 140,
            sortable: false,
            prop: 'name'
          },
          {
            label: "金额",
            sortable: false,
            prop: 'money',
            align: 'right',
            minWidth: 200,
            formatter: (v1, v2, value) => {
              return Number(value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
            }
          },
          {
            label: '使用金额',
            sortable: false,
            prop: 'useMoney',
            align: 'right',
            minWidth: 200,
            formatter: (v1, v2, value) => {
              return Number(value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
            }
          }
        ],
        journalTable: [{
            label: 'ID',
            sortable: false,
            prop: 'id'
          },
          {
            label: "日志类型",
            sortable: false,
            prop: 'type'
          },
          {
            label: "日志内容",
            sortable: false,
            prop: 'remark'
          },
          {
            label: "操作人",
            sortable: false,
            prop: 'admin.name'
          },
          {
            label: "时间",
            sortable: false,
            prop: 'created_at',
            width: 160,
            formatter: (cell, data, value) => {
              return parseTime(new Date(value), '{y}-{m}-{d} {h}:{i}')
            }
          }
        ],
        planTypes: [],

      }
    },
    methods: {
      async getPlanTypes() {
        const res = await getparameter({
          number: 'money_way'
        })
        this.planTypes = res.detail
      },

      async seeBuyProcess() {
        if (!this.detail?.purchase_last_flow_id) {
          Message({
            type: "warning",
            message: "还未进行采购申请",
            duration: 2000
          })
          return
        }
        let res = await getOatoken()
        let url =
          `${process.env.VUE_APP_OA_URL}/admin/flow/view/${this.detail.purchase_last_flow_id}?oatoken=${res.oatoken}`
        let seeBuy = window.open(url, 'seeBuy',
          `top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`
          )
      },
      async seeBidding() {
        if (!this.detail?.invite_last_flow_id) {
          Message({
            type: "warning",
            message: "还未进行招标申请",
            duration: 2000
          })
          return
        }
        let res = await getOatoken()
        let url =
          `${process.env.VUE_APP_OA_URL}/admin/flow/view/${this.detail.invite_last_flow_id}?oatoken=${res.oatoken}`
        let seeBidding = window.open(url, 'seeBidding',
          `top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`
          )
      },
      async seeSignProcess() {
        if (!this.detail?.join_last_flow_id) {
          Message({
            type: "warning",
            message: "还未进行会签申请",
            duration: 2000
          })
          return
        }
        let res = await getOatoken()
        let url =
          `${process.env.VUE_APP_OA_URL}/admin/flow/view/${this.detail.join_last_flow_id}?oatoken=${res.oatoken}`
        let seeSign = window.open(url, 'seeSign',
          `top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`
          )

      },
      async seeAskProcess() {
        if (!this.detail?.req_last_flow_id) {
          Message({
            type: "warning",
            message: "还未进行请示申请",
            duration: 2000
          })
          return
        }
        let res = await getOatoken()
        let url =
          `${process.env.VUE_APP_OA_URL}/admin/flow/view/${this.detail.req_last_flow_id}?oatoken=${res.oatoken}`
        let seeAsk = window.open(url, 'seeAsk',
          `top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`
          )
      },

      async getDetail(id) {
        this.id = id
        let res = await detailContract({
          id: id
        })
        this.detail = res
        let plans = res.plans
        let linkPlan = res.plan_link
        let linkPlanTable = plans?.map(item => {
          let res = linkPlan.filter(item1 => {
            return item1.plan_id === item.id
          })[0]
          return {
            id: item.id,
            type: item.type,
            name: item.name,
            money: item.money,
            useMoney: res.use_money
          }
        })
        this.detail.plans = linkPlanTable
        console.log(this.detail)
      },

    },
    computed: {
      typeFormatter() {
        return function(type) {
          switch (type) {
            case 1:
              return "服务"
              break;
            case 2:
              return "货物"
              break;
            case 3:
              return "工程"
              break;
            case 4:
              return '其他'
              break;
            default:
              return "未知"
          }
        }
      },
      moneyWayFormatter() {
        return function(arr) {
          let res = arr?.map(item => {
            return item.value
          })
          return res?.toString()
        }
      },
      moneyFormat() {
        return function(money) {
          return moneyFormatter(money)
        }
      }
    },
    mounted() {
      this.window.width = screen.availWidth * 0.95
      this.window.height = screen.availHeight * 0.95
      this.window.top = (window.screen.height - 30 - this.window.height) / 2
      this.window.left = (window.screen.width - 10 - this.window.width) / 2
    }
  }
</script>

<style scoped lang="scss">
  .contract-detail {

    .base-info {

      &-title {
        font-weight: 600;

        padding: 0 10px;
      }

      &-item {
        display: flex;

        margin-top: 8px;

        &-title {

          padding: 0 20px;
        }

        &-content {}

        &-unit {

          margin-left: 20px;
        }
      }
    }

    .link-budget-plan {

      margin-top: 20px;

      &-title {
        @extend .base-info-title;

        padding-bottom: 10px;
      }
    }

    .sign-info {

      &-title {
        @extend .link-budget-plan-title;
        margin-top:20px;
      }

      &-item {
        @extend .base-info-item;

        &-title {
          @extend .base-info-item-title;
        }

        &-content {
          @extend .base-info-item-content;
        }

        &-unit {
          @extend .base-info-item-unit;
        }
      }
    }

    .pay-plan {
      margin-top: 20px;

      &-title {
        @extend .link-budget-plan-title;
      }
    }

    .related-processes {

      margin-top: 20px;

      &-title {
        @extend .link-budget-plan-title;
      }

      &-item {
        //color: red;

        display: flex;

        &>div {
          cursor: pointer;

          margin: 0 20px;
        }
      }
    }

    .journal {

      margin-top: 20px;

      &-title {
        @extend .link-budget-plan-title;
      }
    }
  }
</style>
