<template>
  <div style="padding:10px" v-loading="loading">
    <div style="display:flex;">
      <el-tooltip content="返回">
        <el-button size="mini" icon="el-icon-d-arrow-left" @click="back" />
      </el-tooltip>

      <ul style="width:100%;margin-bottom:10px;display:flex;justify-content:flex-end;margin-top:10px;align-items:center;">
        <li style="line-height:30px;margin-right:20px">
         <span>非税总报价 : </span>
         <span>{{Number(total.notTaxTotal).toFixed(2)}}</span>
        </li>

        <li style="line-height:30px;margin-right:20px">
         <span>含税总报价 : </span>
         <span>{{Number(total.includeTaxTotal).toFixed(2)}}</span>
        </li>

        <li style="line-height:30px;margin-right:20px">
         <span>总税额 : </span>
         <span>{{Number(total.total).toFixed(2)}}</span>
        </li>
      </ul>
    </div>

    <ex-table
      :columns="[ ...columns,{ _slot_: 'action', fixed:'right' ,label: '操作', width: '160px' } ]"
      :table="table"
      :data="tableData.planinfo"
      style="margin: 15px 0 0 0"
      :noPagination="true"
    >
      <!-- <template #one={scope}>{{ -->
        <!-- scope.   -->
      <!-- }}</template> -->
      <!-- <template v-for="(slotName,index) in ['one','two','three']"> -->
      <template #one="{scope}">
          {{scope.row.merge_cat.split("-")[0] || '--'}}
        </template>

      <template #two="{scope}">
          {{scope.row.merge_cat.split("-")[1] || '--'}}
      </template>

      <template #three="{scope}">
          {{scope.row.merge_cat.split("-")[2] || '--'}}
        </template>
      <!-- </template> -->
      <template #action={scope}>
        <el-button size="mini" type="text" @click="handleItem(scope.$index, ModalTypes.copy)">复制</el-button>
        <el-button size="mini" type="text" @click="handleItem(scope.$index, ModalTypes.update)">编辑</el-button>
        <el-button size="mini" type="text" @click="deleteItem(scope.$index)">删除</el-button>
      </template>
    </ex-table>

    <update-modal @refresh="onSearch" :storeId="tableData.store_id" :type="modalType" :sitem="sitem" :visible.sync="visible" @save="handleSave" />
  </div>
</template>

<script>
import asyncRequest from "@/apis/service/customerService/workbench";
import companyHelper from '@/mixins/companyHelper'
import UpdateModal from "./modal.vue"

import {
  columns,
  ModalTypes
} from './_template'

export default {
  mixins: [companyHelper],
  props: ['visible'],
  components:{ UpdateModal },
  data() {
    return {
      ModalTypes,
      modalType: ModalTypes.create,
      columns,
      visible: false,
      loading: false,
      tableData: [],
      sitem: {},
      index: -1,
      table: {
        stripe: true,
        border: true,
        'max-height': '800px'
      }
    }
  },
  computed: {
    total(){
      const list = this.tableData.planinfo || []

      return list.reduce((prev,current) => ({
          notTaxTotal:Number(prev.notTaxTotal) + Number( current.pay_fee),
          includeTaxTotal:Number(prev.includeTaxTotal) + Number(current.total_fee),
          total:Number(prev.total) + Number( current.tax_fee),
        }),{
          total:0,
          includeTaxTotal: 0,
          notTaxTotal: 0
        })
    },
    innerVisible: {
      get() {
        return this.visible
      },
      set(newVal) {
        this.$emit('update:visible', newVal)
      }
    }
  },
  mounted(){
    this.onSearch()
  },
  methods: {
    back(){
      this.$router.back()
    },
    async deleteItem(index){
      const item = this.tableData.planinfo[index]

      this.$confirm(`是否确认删除预算函 ${item.name}?`, {
        type:'warning'
      }).then(async () => {
        if(!item.id) {
          this.tableData.planinfo.splice(index, 1)
          return
        }

        this.loading = true
        const { code } = await asyncRequest.planDelete({ id: item.id })
        this.loading = false
        if(code !== 1) return

        this.tableData.planinfo.splice(index, 1)
      })
    },
    async onSearch(){
      this.loading = true
      
      const { code, data } = await asyncRequest.planDetail({
        id: this.$route.query.id
      });

      this.loading = false
      if(code !== 1) return

      this.tableData = data
    },
    handleItem(index, type = ModalTypes.copy ){
      this.sitem = this.tableData.planinfo[index]
      this.index = index
      this.visible = true
      this.modalType = type
    },
    async onSubmit() {
      this.loading = true
      const param = {
        plan_info: this.tableData.planinfo.map(({ name, service_cat, price,unit,  num, tax,  id,total_fee   }) =>  ({total_fee ,name, service_cat, price, unit, num, tax, id })),
        plan_id:this.$route.query.id,
        store_id:this.tableData.store_id
      }

      this.loading = false
      const { code } = await asyncRequest.planUpdate(param)
      if(code !== 1) return
      this.$router.back()
    },
    handleSave(data){
      this.$set(this.tableData.planinfo, this.index, data)
    }
  }
}
</script>

<style lang="scss">
.error-message__wrapper{
  width: 1024px;
}
</style>
