<template>
  <div>
    <!--    编辑-->
    <xy-dialog :is-show.sync="isShowEditor" title="合同编辑" type="form" :form="detail" :rules="rules" @submit="editor" ref="addContract">
      <template v-slot:name>
        <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="detail.name" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:type>
        <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-select placeholder="请选择项目类型" v-model="detail.type" style="width: 300px;">
              <el-option v-for="item in [{label:'服务',value:1},{label:'货品',value:2},{label:'工程',value:3}]" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:methods>
        <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-select placeholder="请选择采购形式" v-model="detail.methods" style="width: 300px;">
              <el-option v-for="item in purchaseType" :label="item.value" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:modality>
        <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-select placeholder="请选择采购方式" v-model="detail.modality" style="width: 300px;">
              <el-option v-for="item in purchaseWay" :label="item.value" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:price>
        <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="detail.price" 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="detail.money" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:fundingChannels>
        <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-select placeholder="请选择资金渠道" v-model="detail.fundingChannels" style="width: 300px;">
              <el-option v-for="item in moneyWay" :value="item.id" :label="item.value"></el-option>
            </el-select>
          </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="detail.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="detail.carryDepartment" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:isBudget>
        <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-switch v-model="detail.isBudget"/>
          </div>
        </div>
      </template>
      <template v-if="detail.isBudget" v-slot:plan>
        <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">
            <div class="contract-add-plan" style="width: 300px;" @click="isShowPlan = true,getBudgets()">
              <template v-if="detail.plan.length > 0">
                <template v-for="item in detail.plan">
                  <Tag closable color="primary" @on-close="delPlan(item)">{{item.label}}</Tag>
                </template>
              </template>
              <template v-else>
                <div class="contract-add-plan-no-plan">请选择关联计划</div>
              </template>
            </div>
          </div>
        </div>
      </template>
    </xy-dialog>

    <!--  编辑中 预算计划  -->
    <xy-dialog :is-show.sync="isShowPlan" title="预算计划" :width="640">
      <template v-slot:normalContent>
        <Input v-model="planSearch" search enter-button="搜 索" placeholder="搜索预算计划.." @on-search="getBudgets"/>

        <xy-table :list="plans" :show-index="false" :table-item="planTable" :height="310" style="margin-top: 10px;" ref="editorPlanTable" @select="selectPlan">
          <template v-slot:btns>
            <el-table-column label="使用金额" header-align="center">
              <template slot-scope="scope">
                <Input :value="scope.row.useMoney ? scope.row.useMoney: scope.row.money" @input="(e)=>scope.row.useMoney = e"/>
              </template>
            </el-table-column>
          </template>
        </xy-table>

        <div style="display: flex;justify-content: flex-end;">
          <Page :total="planTotal" show-elevator @on-change="planPageChange"/>
        </div>
      </template>

      <template v-slot:footerContent>
        <Button type="primary" @click="isShowPlan = false">确定</Button>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import {editorContract,detailContract} from "@/api/contract/contract";
import {getBudget} from "@/api/budget/budget";
import {Message} from 'element-ui'
export default {
  props:{
    purchaseType:Array,
    moneyWay:Array,
    purchaseWay:Array
  },
  data() {
    var planPass = (rule, value, callback) => {
      if(this.detail.isBudget){
        if(this.detail.plan.length === 0){
          return callback(new Error('必选'))
        }else{
          callback()
        }
      }else{
        callback()
      }
    }
    return {
      contrantId:'',
      isShowEditor:false,
      isShowPlan:false,
      detail:{},
      rules:{
        name:[
          {required:true,message:"必填"}
        ],
        type:[
          {required:true,message:"必选"}
        ],
        methods:[
          {required:true,message:"必选"}
        ],
        modality:[
          {required:true,message:"必选"}
        ],
        price:[
          {required:true,message:"必填"}
        ],
        money:[
          {required:true,message:"必填"}
        ],
        fundingChannels:[
          {required:true,message:"必填"}
        ],
        supply:[
          {required:true,message:"必填"}
        ],
        carryDepartment:[
          {required:true,message:"必填"}
        ],
        plan:[
          {validator:planPass}
        ]
      },
      plans:[],
      planSearch:'',
      planTable:[
        {
          sortable:false,
          width:36,
          type:"selection"
        },
        {
          label:"分类",
          prop:'type',
          formatter:(cell,data,value)=>{
            switch (value){
              case 1:
                return "部门预算"
                break;
              case 2:
                return "水务计划"
                break;
              default:
                return "未知"
            }
          }
        },
        {
          label:"名称",
          prop:'name',
          align:'left'
        },
        {
          label:"计划金额",
          prop:'money',
          align:'right'
        }
      ],
      planTotal:0,

    }
  },
  methods: {

    //选择计划
    selectPlan(sel,row){
      if(sel){
        this.detail.plan = sel.map(item => {
          return {
            label:item.name,
            value:{
              plan_id:item.id,
              use_money:item.useMoney ?? item.money,
              new_money:item.money
            }
          }
        })
      }else{
        this.detail.plan = []
      }
    },
    delPlan(val){
      this.detail.plan.map((item,index)=>{
        if(item.value.plan_id === val.value.plan_id){
          this.detail.plan.splice(index,1)
        }
      })
    },
    //获取预算计划
    async getBudgets(){
      let res = await getBudget({name:this.planSearch,page_size:10,page:this.plansPageIndex})
      this.plans = res.data
      this.planTotal = res.total

      this.toggleSelection(this.detail.plan.map(item => {
        return item.value.plan_id
      }))
    },
    planPageChange(e){
      this.plansPageIndex = e
      this.getBudgets()
    },
    //默认选择计划
    toggleSelection(plans) {
      if (plans) {
        this.plans.filter(plan => {
          return plans.includes(plan.id)
        }).map(row => {
          this.$refs.editorPlanTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.editorPlanTable.clearSelection()
      }
    },
    async getDetail(id){
      let res = await detailContract({id:id})
      this.contrantId = res.id
      this.detail = {
        name:res.name,
        type:res.type,
        methods:res.purchase_type_id,
        modality:res.purchase_way_id,
        fundingChannels:res.money_way_id,
        price:res.plan_price,
        money:res.money,
        supply:res.supply,
        carryDepartment:res.carry_department,
        isBudget:res.is_plan === 1 ? true : false,
        plan:res.plans.map(item=>{
          return {
            label:item.name,
            value:{
              plan_id:item.id,
              use_money:item.useMoney ?? item.money,
              new_money:item.money
            }
          }
        })
      }
    },
    editor(){
      editorContract({
        id:this.contrantId,
        type:this.detail.type,
        is_plan:this.detail.isBudget ? 1 : 0,
        purchase_type_id:this.detail.methods,
        purchase_way_id:this.detail.modality,
        money_way_id:this.detail.fundingChannels,
        plan_price:this.detail.price,
        name:this.detail.name,
        carry_department:this.detail.carryDepartment,
        contract_plan_links:this.detail.plan.map(item=>{
          return item.value
        })
      }).then(res=>{
        this.isShowEditor = false
        Message({
          type:'success',
          message:"操作成功"
        })
        this.$emit('success')
      })
    },

  },
  mounted() {

  },
}
</script>

<style scoped lang="scss">
.contract-add-plan{
  min-height: 30px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;

  padding: 0 8px;
  &-no-plan{
    height: 30px;
    line-height: 30px;
    color: #CDD0D5;
  }
}

.xy-table-item-label{
  width: 140px;
}
.xy-table-item-price{
  position: relative;
  &::after{
    position: absolute;
    right: 0;
    top: 0;
    content:'（元）'
  }
}
</style>
