<template>
  <a-spin :spinning="confirmLoading">
    <a-form-model ref="form" :model="model" :rules="validatorRules">
      <a-descriptions title="基础信息"></a-descriptions>
      <a-row class="form-row" :gutter="24">
        <a-col :lg="12" :md="12" :sm="24">
          <a-form-model-item label="服务商全称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
            <a-input v-model.trim="model.name" placeholder="服务商全称" :disabled="model.id ? true : false" :maxLength="100"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :lg="12" :md="12" :sm="24">
          <a-form-model-item label="服务商简称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="abbreviation">
            <a-input v-model.trim="model.abbreviation" placeholder="服务商简称" :disabled="model.id ? true : false" :maxLength="100"></a-input>
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-descriptions>
        <!--头部slot-->
        <template slot="title">
          开票内容
          <a-button type="primary" class="apply-button" icon="plus" @click="handleAddWork" size="small" v-has="'hlw:subcontractor:addInvoice'">添加开票内容</a-button>
        </template>
      </a-descriptions>
      <a-table
        ref="table"
        size="middle"
        bordered
        :scroll="{x:true}"
        :rowKey="(record,index)=>{return index}"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        class="j-table-force-nowrap">

        <span slot="invoiceCategoryName" slot-scope="text, record, index">
          *{{record.invoiceCategoryName}}*{{record.taxCategoryName}}
        </span>

        <span slot="action" slot-scope="text, record, index">
          <a @click="handleDelete(record)" v-has="'hlw:subcontractor:deleteInvoice'">删除</a>
          <a-divider type="vertical" v-has="'hlw:subcontractor:isOnInvoice'"/>
          <a @click="handleIsOn(record)" v-has="'hlw:subcontractor:isOnInvoice'">启用禁用</a>
        </span>

      </a-table>

    </a-form-model>
    <HlwSubcontractorInvoiceCategoryIsOnModal ref="isOnModalForm" @ok="modalFormOk"></HlwSubcontractorInvoiceCategoryIsOnModal>
  </a-spin>
</template>

<script>

  import { httpAction, getAction,deleteAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'
  import moment from 'moment'
  import HlwSubcontractorInvoiceCategoryIsOnModal from './HlwSubcontractorInvoiceCategoryIsOnModal'

  export default {
    name: "HcmResumeModal",
    components: {
      HlwSubcontractorInvoiceCategoryIsOnModal
    },
    data () {
      return {
        title:"操作",
        width:800,
        visible: false,
        model: {
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        dataSource:[],
        columns: [
          {
            title:'开票内容',
            align:"center",
            dataIndex: 'invoiceCategoryName',
            scopedSlots: { customRender: 'invoiceCategoryName' }
          },
          {
            title:'启用状态',
            align:"center",
            dataIndex: 'isOn_dictText'
          },
          {
            title:'创建时间',
            align:"center",
            dataIndex: 'createTime',
            customRender:function (text) {
              return text
            }
          },
          {
            title:'创建者',
            align:"center",
            dataIndex: 'createBy'
          },
          {
            title:'更新时间',
            align:"center",
            dataIndex: 'updateTime',
            customRender:function (text) {
              return text
            }
          },
          {
            title:'更新者',
            align:"center",
            dataIndex: 'updateBy'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          add: "/wisdom/hlwSubcontractor/add",
          edit: "/wisdom/hlwSubcontractor/edit",
          get: '/wisdom/hlwSubcontractor/queryById',
          findInvoiceList: '/wisdom/hlwSubcontractorInvoiceCategory/findInvoiceList',
          delete: '/wisdom/hlwSubcontractorInvoiceCategory/delete'
        }
      }
    },
    created () {
      const id = this.$route.query.id;
      if(id){
        //查询基本信息
        this.getDetail(id);
      }
    },
    methods: {
      getDetail(id){
        let that = this;
        that.confirmLoading = true;
        getAction(that.url.get,{id: id}).then((res)=>{
          if(res.success){
            this.model = Object.assign({}, res.result);
            //开票内容
            this.findInvoiceList();
          }else{
            console.log('查询失败');
          }
        }).finally(() => {
          that.confirmLoading = false;
        })
      },
      findInvoiceList(){
        let that = this;
        that.confirmLoading = true;
        getAction(that.url.findInvoiceList,{subcontractorId: that.model.id}).then((res)=>{
          if(res.success){
            this.dataSource = res.result;
          }else{
            console.log('查询失败');
          }
        }).finally(() => {
          that.confirmLoading = false;
        })
      },
      handleCancel () {
        this.close()
      },
      handleAddWork(){
        this.$refs.isOnModalForm.add({subcontractorId: this.model.id});
        this.$refs.isOnModalForm.title = "添加开票内容";
        this.$refs.isOnModalForm.disableSubmit = false;
      },
      modalFormOk(){
        this.findInvoiceList();
      },
      handleDelete(record){
        var that = this;
        const modal = that.$confirm({
          title: '删除开票内容',
          closable: true,
          keyboard: false,
          maskClosable: true,
          content: '确定要删除该开票内容吗？',
          okText: '确定删除',
          cancelText: '取消',
          onOk: function() {
            deleteAction(that.url.delete, {id: record.id}).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.findInvoiceList();
              } else {
                that.$message.warning(res.message);
              }
            });
          },
          onCancel(e) {
            modal.destroy()
          }
        })
      },
      handleIsOn(record){
        this.$refs.isOnModalForm.edit(record);
        this.$refs.isOnModalForm.title = "开票内容启用禁用";
        this.$refs.isOnModalForm.disableSubmit = false;
      },
    }
  }
</script>
<style scoped>
  .apply-button{
    margin-left: 16px;
  }
  /deep/ .ant-descriptions-title {
    margin-bottom: 16px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: bold;
    font-size: 16px;
    line-height: 1.5;
    display: flex;
    align-items: center;
  }
  /deep/ .ant-descriptions-row > td {
    padding-bottom: 12px;
  }
</style>