<template>
  <div>
    <xy-dialog :is-show.sync="isShow" title="合同签订" type="form" :form="form" :rules="rules" @submit="sign" ok-text="提交">
      <template v-slot:extraFormTop>
        <div class="base-info" style="margin-bottom: 20px;">
          <div class="base-info-title">合同信息</div>
          <div class="base-info-item">
            <div class="base-info-item-title">合同名称</div>
            <div class="base-info-item-content">{{contract.name}}</div>
          </div>
        </div>
      </template>
      <template v-slot:number>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>合同编号
          </div>
          <div class="xy-table-item-content">
            <el-input placeholder="请填写合同编号" v-model="form.number" style="width: 300px;" />
          </div>
        </div>
      </template>
      <template v-slot:supply>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>承包商\供应商
          </div>
          <div class="xy-table-item-content">
            <el-input placeholder="请填写承包商\供应商" v-model="form.supply" style="width: 300px;" />
          </div>
        </div>
      </template>
      <template v-slot:carryDepartment>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>执行部门
          </div>
          <div class="xy-table-item-content">
            <el-input placeholder="请填写执行部门" v-model="form.carryDepartment" style="width: 300px;" />
          </div>
        </div>
      </template>
      <template v-slot:money>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>合同金额
          </div>
          <div class="xy-table-item-content xy-table-item-price">
            <el-input placeholder="请填写合同金额" v-model="form.money" style="width: 300px;" />
          </div>
        </div>
      </template>
      <template v-slot:time>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>合同服务时间
          </div>
          <div class="xy-table-item-content">
            <el-date-picker style="width: 300px;" value-format="yyyy-MM-dd" v-model="form.time" type="daterange"
              range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </div>
      </template>



      <template v-slot:is_assurance>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="width: 200px">是否收取履约保函
          </div>
          <div class="xy-table-item-content">
            <el-switch v-model="form.is_assurance" />
          </div>
        </div>
      </template>
      <template v-if="form.is_assurance" v-slot:assurance_money>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="width: 200px">保函金额
          </div>
          <div class="xy-table-item-content xy-table-item-price">
            <el-input-number v-model="form.assurance_money" :controls="false" :precision="2" placeholder="请输入保函金额" style="width: 300px;"></el-input-number>
          </div>
        </div>
      </template>
      <template v-if="form.is_assurance" v-slot:assurance_expire>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="width: 200px">保函有效期
          </div>
          <div class="xy-table-item-content">
            <el-date-picker value-format="yyyy-MM-dd" v-model="form.assurance_expire" placeholder="请输入保函有效期" style="width: 300px;"/>
          </div>
        </div>
      </template>

      <template v-slot:guaranteeMoney>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>质保金
          </div>
          <div class="xy-table-item-content xy-table-item-price">
            <el-input-number :precision="2" :controls="false" placeholder="请填写质保金" v-model="form.guaranteeMoney"
              style="width: 300px;" />
          </div>
        </div>
      </template>
      <template v-slot:date>
        <div class="xy-table-item">
          <div class="xy-table-item-label">

            <span style="color: red;">*</span>
            签订日期
          </div>
          <div class="xy-table-item-content">
            <el-date-picker style="width: 300px;" value-format="yyyy-MM-dd" v-model="form.date" type="date">
            </el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:guaranteeYear>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>质保期
          </div>
          <div class="xy-table-item-content xy-table-item-year">
            <el-input-number :controls="false" placeholder="请填写质保期" v-model="form.guaranteeYear"
              style="width: 300px;" />
          </div>
        </div>
      </template>
      <template v-slot:extraFormBottom>
        <div class="base-info add-plan" style="margin-top: 20px;margin-bottom: 20px">
          <div class="base-info-title">付款计划</div>
          <Button type="primary" style="margin-left: 50px;" @click="isShowAddPlan = true">新增计划</Button>
        </div>

        <xy-table :list="signList" :table-item="signTable" :show-index="false" :height="240"
          @delete="deleteContractSign"
          @editor="(row)=>{$refs['detailContractSign'].planId = row.id;$refs['detailContractSign'].isShow = true}">

        </xy-table>
      </template>
    </xy-dialog>

    <!--    新增计划-->
    <xy-dialog :is-show.sync="isShowAddPlan" type="form" title="新增计划" :form="planForm" :rules="planRules" :width="48"
      @submit="submit">
      <template v-slot:date>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;">*</span>
            <span>日期</span>
          </div>
          <div class="xy-table-item-content">
            <el-datePicker style="width: 300px" v-model="planForm.date" type="date" placeholder="请选择日期"></el-datePicker>
          </div>
        </div>
      </template>
      <template v-slot:content>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;">*</span>
            <span>内容</span>
          </div>
          <div class="xy-table-item-content">
            <el-input style="width: 300px" type="textarea" v-model="planForm.content" placeholder="请输入内容" />
          </div>
        </div>
      </template>
      <template v-slot:money>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;">*</span>
            <span>金额</span>
          </div>
          <div class="xy-table-item-content xy-table-item-price">
            <el-input style="width: 300px" v-model="planForm.money" placeholder="请输入金额" />
          </div>
        </div>
      </template>
      <template v-slot:remark>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span>备注</span>
          </div>
          <div class="xy-table-item-content">
            <el-input style="width: 300px" type="textarea" v-model="planForm.remark" placeholder="请输入备注" />
          </div>
        </div>
      </template>
    </xy-dialog>

    <detailContractSign ref="detailContractSign" @editorSuccess="getContractSignList"></detailContractSign>
  </div>
</template>

<script>
  import { MessageBox } from 'element-ui';
  import {
    addContractSign,
    getContractSign,
    delContractSign
  } from "@/api/contractSign/contractSign";
  import {
    detailContract,
    editorContract
  } from "@/api/contract/contract";
  import {
    Message
  } from "element-ui";
  import {
    parseTime,
    moneyFormatter
  } from "@/utils"

  import detailContractSign from "@/views/contract/components/detailContractSign";
  import {
    getOatoken
  } from "@/api/oatoken";
  import axios from "axios";
  export default {
    components: {
      detailContractSign
    },
    data() {
      return {
        form: {
          number: '',
          supply: '',
          carryDepartment: '',
          money: '',
          time: [],
          guaranteeMoney: '',
          guaranteeYear: '',
          date: "",
          is_assurance: false,
          assurance_money:'',
          assurance_expire:''
        },
        rules: {
          number: [{
            required: true,
            message: "必填"
          }],
          date: [{
            required: true,
            message: "必填"
          }],
          supply: [{
            required: true,
            message: "必填"
          }],
          carryDepartment: [{
            required: true,
            message: "必填"
          }],
          money: [{
              required: true,
              message: "必填"
            },
            {
              pattern: /^\d+(\.\d+)?$/,
              message: '必须为数字'
            }
          ],
          time: [{
            required: true,
            message: "必选"
          }],
          guaranteeMoney: [{
            required: true,
            message: "必填"
          }],
          guaranteeYear: [{
            required: true,
            message: "必填"
          }]
        },

        isShow: false,
        contractId: null,
        contract: {},
        signList: [],
        signTable: [{
            prop: 'created_at',
            label: '日期',
            width: 170,
            sortable: false,
            formatter: (v1, v2, value) => {
              return parseTime(new Date(value))
            }
          },
          {
            prop: 'money',
            label: '金额',
            align: 'right',
            width: 120,
            sortable: false,
            formatter: (v1, v2, value) => {
              return moneyFormatter(value)
            }
          },
          {
            prop: 'content',
            label: '内容',
            minWidth: 180,
            align: 'left',
            sortable: false,
          },
          {
            prop: 'remark',
            label: '备注',
            minWidth: 180,
            align: 'left',
            sortable: false,
          }
        ],

        isShowAddPlan: false,
        planForm: {
          date: '',
          money: '',
          content: '',
          remark: ''
        },
        planRules: {
          date: [{
            required: true,
            message: "必填"
          }],
          content: [{
            required: true,
            message: "必填"
          }],
          money: [{
              required: true,
              message: "必填"
            },
            {
              pattern: /^\d+(\.\d+)?$/,
              message: '必须为数字'
            }
          ]
        }
      }
    },
    methods: {
      //合同签订
      sign() {
        console.log(this.signList)
        console.log(this.signList.length)
        if (this.signList.length == 0) {
          Message({
            type: 'error',
            message: '该项目未设置付款计划，请设置付款计划后保存'
          })
          return false;
        }

        editorContract({
          id: this.contractId,
          number: this.form.number,
          supply: this.form.supply,
          carry_department: this.form.carryDepartment,
          money: this.form.money,
          status: 2,
          guarantee_money: this.form.guaranteeMoney,
          guarantee_year: this.form.guaranteeYear,
          start_date: this.form.time[0],
          end_date: this.form.time[1],
          date: this.form.date,
          is_assurance: this.form.is_assurance,
          assurance_money:this.form.assurance_money,
          assurance_expire:this.form.assurance_expire
        }).then(res => {
          this.isShow = false
          Message({
            type: 'success',
            message: '操作成功'
          })
          this.$emit('signSuccess')
        })
      },

      async getContractSignList() {
        const res = await getContractSign({
          contract_id: this.contractId
        })
        this.signList = res.data
      },
      async getContract() {
        const res = await detailContract({
          id: this.contractId
        })
        this.contract = res;
        Object.assign(this.form, res);
        if (res.start_date && res.end_date)
          this.form.time = [res.start_date, res.end_date];
        else
          this.form.time = [];
        this.form.carryDepartment = res.carry_department;
        this.form.guaranteeMoney = res.guarantee_money;
        this.form.guaranteeYear = res.guarantee_year;
        this.form.is_assurance = res.is_assurance === 1
        this.form.assurance_expire = res.assurance_expire
        this.form.assurance_money = res.assurance_money
        console.log(this.form)
      },
      deleteContractSign(row) {
        delContractSign({
          id: row.id
        }).then(res => {
          this.getContractSignList()
          Message({
            type: 'success',
            message: '操作成功'
          })
        })
      },
      submit() {
        console.log(this.planForm)

        addContractSign({
          contract_id: this.contract.id,
          date: `${new Date(this.planForm.date).getFullYear()}-${new Date(this.planForm.date).getMonth()+1}-${new Date(this.planForm.date).getDate()}`,
          content: this.planForm.content,
          money: this.planForm.money,
          remark: this.planForm.remark
        }).then(res => {
          this.isShowAddPlan = false
          this.getContractSignList()
          console.log(res)
          Message({
            type: 'success',
            message: '操作成功'
          })
        })
      },

      //获取oa合同信息
      async getOaContractInfo() {
        try {
          let res = await getOatoken()
          let url =
            `${process.env.VUE_APP_OUT_URL}/admin/flow/view/${this.contract.join_last_flow_id}?oatoken=${res.oatoken}&get_raw=1`
          const oaInfo = await axios.get(url)
          this.form.money = Number(oaInfo.data.flow['合同金额（元）'])
          this.form.number = oaInfo.data.flow['合同编号']
          this.form.supply = oaInfo.data.flow['承包商\\供应商']
          this.form.carryDepartment = oaInfo.data.flow['执行部门']
        } catch {

        }

      }
    },
    watch: {
      async contractId() {
        await this.getContractSignList()
        await this.getContract()
        await this.getOaContractInfo()
      }
    }
  }
</script>

<style scoped lang="scss">
  .base-info {

    &-title {
      font-weight: 600;

      padding: 0 10px;
    }

    &-item {
      display: flex;

      margin-top: 8px;

      &-title {

        padding: 0 20px;
      }

      &-content {}

      &-unit {

        margin-left: 20px;
      }
    }
  }

  .add-plan {
    display: flex;
    align-items: center;
  }

  .xy-table-item-label {
    width: 200px;
  }

  .xy-table-item-price {
    position: relative;

    &::after {
      position: absolute;
      right: 0;
      top: 0;
      content: '（元）'
    }
  }

  .xy-table-item-price-wan {
    position: relative;

    &::after {
      position: absolute;
      right: 0;
      top: 0;
      content: '（万元）'
    }

    ::v-deep .el-input__clear {
      position: relative;
      right: 46px;
      z-index: 2;
    }
  }

  .xy-table-item-year {
    position: relative;

    &::after {
      position: absolute;
      right: 4%;
      top: 0;
      content: '年'
    }
  }

  ::v-deep .el-input__inner {
    text-align: left;
  }
</style>
