<template>
  <a-modal
    :title="title"
    :width="modelStyle.width"
    :visible="visible"
    :bodyStyle="bodyStyle"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :maskClosable="false"
    cancelText="关闭">
    <template slot="footer">
      <a-button type="primary" @click="handleOk">
        关闭
      </a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-card :bordered="false">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <template v-if="model.isPayment">
            已走款：{{model.minPaymentTime.length > 10 ? model.minPaymentTime.substring(0,10) : model.minPaymentTime}}~{{model.maxPaymentTime.length > 10 ? model.maxPaymentTime.substring(0,10) : model.maxPaymentTime}}
          </template>
          <template v-else>
            未走款
          </template>
        </div>

        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button @click="uploadContract()" type="primary" icon="plus" v-has="'order:workContract'">上传合同</a-button>
        </div>

        <!-- table区域-begin -->
        <div>

          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="handleTableChange">

            <span slot="endDate" slot-scope="text, record">
              <template v-if="record.isAutoRenew === 0 && text">
                <template v-if="record.contractStatus == 1">
                  <span style="color: #FF7312">{{text.length > 10 ? text.substring(0,10) : text}}(即将到期)</span>
                </template>
                <template v-else-if="record.contractStatus == 2">
                  <span style="color: #F01B1B">{{text.length > 10 ? text.substring(0,10) : text}}(已到期)</span>
                </template>
                <template v-else>
                  {{text.length > 10 ? text.substring(0,10) : text}}
                </template>
              </template>
              <template v-else>
                 --
              </template>
            </span>

            <span slot="action" slot-scope="text, record">
              <template v-if="record.contractStatus==2">
                --
              </template>
              <template v-else>
                <a @click="uploadContract1(record)" v-has="'order:workContract'">编辑</a>
              </template>
              <a-divider type="vertical" v-has="'order:workContract'"/>
              <a @click="uploadContract2(record)" v-has="'order:viewWorkContract'">查看合同</a>
            </span>
          </a-table>
        </div>
        <HwOrderUploadContractModal ref="uploadContractForm" @ok="modalFormOk"></HwOrderUploadContractModal>
      </a-card>
    </a-spin>
  </a-modal>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { filterObj } from '@/utils/util'
  import { httpAction ,getAction,putAction,deleteAction} from '@/api/manage'
  import HwOrderUploadContractModal from './HwOrderUploadContractModal'

  export default {
    name: "HwOrderSubcontractorContract",
    mixins:[JeecgListMixin,],
    components: {
      HwOrderUploadContractModal
    },
    data () {
      return {
        orderCode:0,
        subcontractorId: 0,
        form: this.$form.createForm(this),
        bodyStyle: {
          padding: '0',
          height: (window.innerHeight * 0.58) + 'px',
          'overflow-y': 'auto'
        },
        modelStyle: {
          width: '62%',
          style: { top: '20px' },
          fullScreen: false
        },
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        title: '用户合同',
        description: '用户合同',
        // 表头
        columns: [
          {
            title: '合同开始时间',
            align: 'left',
            dataIndex: 'startDate',
            customRender:function (text) {
              return text ? text.substring(0,10) : "--";
            }
          },
          {
            title: '合同结束时间',
            align: 'left',
            dataIndex: 'endDate',
            scopedSlots: { customRender: 'endDate' }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"left",
            // fixed:"right",
            width:200,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/ordermanager/hwOrder/orderSubcontractorContractList",
        },
        dictOptions:{},
      }
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      getQueryParams() {
        var param = Object.assign({}, this.queryParam, this.isorter)
        param.field = this.getQueryField()
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        param.subcontractorId = this.subcontractorId
        param.orderCode = this.orderCode
        return filterObj(param)
      },
      edit (record) {
        this.model={}
        this.model = Object.assign({}, record);
        this.dataSource=[]
        this.ipagination.total=0
        this.subcontractorId = record.subcontractorId
        this.orderCode = record.orderCode
        this.visible = true
        this.loadData(1)
      },
      loadData(arg) {
        if (!this.url.list) {
          this.$message.error('请设置url.list属性!')
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams()//查询条件
        this.loading = true
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records
            this.ipagination.total = res.result.total;
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
      },
      close () {
        this.$emit('ok');
        this.visible = false;
      },
      handleOk () {
        this.$emit('ok');
        this.close()
      },
      handleCancel () {
        this.$emit('ok');
        this.close()
      },
      modalFormOk(){
        this.loadData(1)
      },
      uploadContract(){
        var record1={}
        record1.orderCode=this.orderCode
        record1.subcontractorId=this.subcontractorId
        this.$refs.uploadContractForm.edit(record1);
        this.$refs.uploadContractForm.title = this.title;
        this.$refs.uploadContractForm.disableSubmit = false;
      },

      uploadContract1(record){
        var record1={}
        record1.contractId=record.id
        record1.orderCode = this.orderCode
        record1.subcontractorId = this.subcontractorId
        record1.workContract = record.workContract
        record1.startDate = record.startDate
        record1.endDate = record.endDate
        record1.isAutoRenew = record.isAutoRenew
        this.$refs.uploadContractForm.edit(record1);
        this.$refs.uploadContractForm.title = this.title;
        this.$refs.uploadContractForm.disableSubmit = false;
      },

      uploadContract2(record){
        var record1={}
        record1.contractId=record.id
        record1.orderCode=this.orderCode
        record1.subcontractorId=this.subcontractorId
        record1.workContract=record.workContract
        record1.startDate=record.startDate
        record1.endDate=record.endDate
        record1.isAutoRenew = record.isAutoRenew
        this.$refs.uploadContractForm.edit(record1);
        this.$refs.uploadContractForm.title = this.title;
        this.$refs.uploadContractForm.disableSubmit = true;
      }

    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>