<template>
  <a-modal
    :title='title'
    :width='modelStyle.width'
    :visible='visible'
    :bodyStyle='bodyStyle'
    :confirmLoading='confirmLoading'
    @ok='handleOk'
    @cancel='handleCancel'
    :maskClosable='false'
    :footer='null'
    cancelText='关闭'>
    <a-spin :spinning='confirmLoading'>
      <a-card :bordered='false'>
        <!-- 查询区域 -->
        <div class='table-page-search-wrapper'>
          <!--<a-form layout="inline" @keyup.enter.native="searchQuery">-->
          <!--<a-row :gutter="24">-->
          <!--<a-col :md="6" :sm="8">-->
          <!--<a-form-item label="服务商">-->
          <!--<a-input placeholder="请输入服务商" v-model="queryParam.subcontractorName"></a-input>-->
          <!--</a-form-item>-->
          <!--</a-col>-->
          <!--<a-col :md="6" :sm="8" >-->
          <!--<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">-->
          <!--<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>-->
          <!--<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>-->
          <!--<a @click="handleToggleSearch" style="margin-left: 8px">-->
          <!--{{ toggleSearchStatus ? '收起' : '展开' }}-->
          <!--<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>-->
          <!--</a>-->
          <!--</span>-->
          <!--</a-col>-->

          <!--</a-row>-->
          <!--</a-form>-->

        </div>
        <!-- 查询区域-END -->
        <a-row type='flex' align='middle'>
          <h3 style='margin: 0'>基本配置</h3>
          <a-col style='margin-left: 15px'>支付类型：实付</a-col>
        </a-row>


        <!--        <div style="margin-bottom: 30px;margin-left: 30px;margin-top: 30px">支付类型：{{paymentTypeMsg}}     <a style="padding-left: 20px" @click="changePaymentType()" v-has="'companySubcontractor:editPaymentType'">编辑</a></div>-->
        <!-- 操作按钮区域 -->
        <!--        <div class="table-operator" style="display: flex;flex-direction: row">-->
        <!--         <h3 style="margin-right: 30px">服务商配置</h3>-->
        <!--        </div>-->
        <a-row type='flex' align='middle' justify='space-between' style='margin-top: 20px;margin-bottom: 25px'>
          <h3 style='margin: 0'>服务商配置</h3>
          <a-col style='margin-left: 15px'>
            <a-button @click='handleAdd()' type='primary' icon='plus' v-has="'companySubcontractor:add'">新增服务商
            </a-button>
          </a-col>
        </a-row>
        <!-- table区域-begin -->
        <div>

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



            <span slot='action' slot-scope='text, record'>
                <a @click='handleEdit(record)' v-has="'companySubcontractor:edit'">编辑</a>
                 <a-divider type='vertical' v-has="'companySubcontractor:subcontractorManager'" />
              <a @click='subcontractorManager(record)' v-has="'companySubcontractor:subcontractorManager'">合同管理</a>
                <a-divider type='vertical' v-has="'companySubcontractor:lock'" />
              <a @click='handleIsOn(record)' v-if='record.isOn === 1' v-has="'companySubcontractor:lock'">停用</a>
              <a @click='handleIsOn(record)' v-if='record.isOn === 0' v-has="'companySubcontractor:lock'">启用</a>
              <a-divider type='vertical' v-has="'companySubcontractor:delete'" />
              <a @click='handledelete(record)' v-has="'companySubcontractor:delete'">删除</a>
        </span>

          </a-table>
        </div>

        <hw-company-select-payment-type ref='selectModalForm' @ok='modalFormOk'></hw-company-select-payment-type>
        <hw-company-subcontractor-modal ref='modalForm' @ok='modalFormOk'></hw-company-subcontractor-modal>
        <hw-company-subcontractor-contract ref='selectContractModalForm'
                                           @ok='modalFormOk'></hw-company-subcontractor-contract>
        <hw-company-subcontractor-edit-modal ref='modalEditForm'
                                             @ok='modalFormOk'></hw-company-subcontractor-edit-modal>
      </a-card>
    </a-spin>
    <div class='drawer-bootom-button'>
      <a-button class='ant-btn ant-btn-primary' @click='handleCancel'>关闭</a-button>
    </div>
  </a-modal>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { httpAction, getAction, putAction, deleteAction } from '@/api/manage'
import pick from 'lodash.pick'
import { filterObj } from '@/utils/util'
import { ajaxFilterDictText } from '@/components/dict/JDictSelectUtil'
import HwCompanySelectPaymentType from './HwCompanySelectPaymentType'
import HwCompanySubcontractorModal from './HwCompanySubcontractorModal'
import HwCompanySubcontractorContract from './HwCompanySubcontractorContract'
import HwCompanySubcontractorEditModal from './HwCompanySubcontractorEditModal'

const isOnSubcontractor = (params) => putAction('/saasmanager/hwPlatformCompany/companySubcontractorLock', params)
const deleteCompanySubcontractor = (params) => putAction('/saasmanager/hwPlatformCompany/companySubcontractorDelete', params)
const getPaymentType = (params) => getAction('/saasmanager/hwPlatformCompany/getPaymentType', params)

export default {
  name: 'HwCompanySubcontractor',
  mixins: [JeecgListMixin],
  components: {
    HwCompanySubcontractorEditModal,
    HwCompanySubcontractorContract,
    HwCompanySubcontractorModal,
    HwCompanySelectPaymentType


  },
  data() {
    return {
      paymentTypeMsg: '',
      paymentType: null,
      form: this.$form.createForm(this),
      title: '操作',
      bodyStyle: {
        padding: '0',
        height: (window.innerHeight * 0.66) + 'px',
        'overflow-y': 'auto'
      },
      modelStyle: {
        width: '76%',
        style: { top: '20px' },
        fullScreen: false
      },
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      options: [{
        value: '',
        label: '',
        isLeaf: false
      }],
      // 查询条件
      queryParam: {
        subcontractorName: ''
      },
      // 表头
      columns: [
        {
          title: '服务商名称',
          align: 'left',
          dataIndex: 'subcontractorName',
          customRender: function(text, record) {
            console.log(11111, record)
            if (record.cpType == 1) {
              return text
            }
            if (record.cpType == 2) {
              return record.cpAbbreviation + '--' + record.cpSubcontractorName
            }
          }
        },
        {
          title: '服务费率',
          align: 'left',
          dataIndex: 'serviceRate',
          customRender: function(text) {
            return text + '%'
          }
        },
        {
          title: '合同',
          align: 'left',
          dataIndex: 'contractType_dictText'
        },
        {
          title: '状态',
          align: 'left',
          dataIndex: 'isOn_dictText'
        },
        {
          title: '操作',
          align: 'left',
          scopedSlots: { customRender: 'action' }
        }
      ],
      platformId: 0,
      confirmLoading: false,
      url: {
        list: '/saasmanager/hwPlatformCompany/companySubList'
      }

    }
  },
  created() {

  },
  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.companyId = this.companyId
      return filterObj(param)
    },
    edit(record) {
      this.dataSource = []
      this.ipagination.total = 0
      this.paymentTypeMsg = ''
      this.model = Object.assign({}, record)
      this.companyId = record.id
      this.platformId = record.platformId
      this.visible = true
      this.loadData(1)
      getPaymentType({ companyId: record.id }).then((res) => {
        if (res.success) {
          if (res.message != null) {
            this.paymentType = res.message
            ajaxFilterDictText('payment_Type', res.message).then((res) => {
              this.paymentTypeMsg = res
            })
          }
        }
      })
    },
    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.visible = false
    },
    handleOk() {
      this.$emit('ok')
      this.close()
    },
    handleCancel() {
      this.close()
    },
    modalFormOk() {
      this.loadData(1)
      getPaymentType({ companyId: this.companyId }).then((res) => {
        if (res.success) {
          if (res.message != null) {
            this.paymentType = res.message
            ajaxFilterDictText('payment_Type', res.message).then((res) => {
              this.paymentTypeMsg = res
            })
          }
        }
      })
    },
    //添加服务商
    handleAdd() {
      var record = {}
      record.companyId = this.companyId
      record.platformId = this.platformId
      this.$refs.modalForm.add(record)
      this.$refs.modalForm.title = '添加服务商'
      this.$refs.modalForm.disableSubmit = false
    },

    changePaymentType() {
      var record = {}
      record.id = this.companyId
      record.paymentType = this.paymentType
      this.$refs.selectModalForm.edit(record)
      this.$refs.selectModalForm.title = '编辑支付类型'
      this.$refs.selectModalForm.disableSubmit = false
    },

    //启停服务商
    handleIsOn(record) {
      record.companyId = this.companyId
      let content = ''
      let title = ''
      if (record.isOn === 1) {
        content = '停用后平台下所有企业都无法进行充值和支付，确认要停用该服务商吗'
        title = '停用服务商'
      } else {
        content = '确定要启用该服务商吗？'
        title = '启用服务商'
      }
      let that = this
      const modal = that.$confirm({
        title: title,
        closable: true,
        keyboard: false,
        maskClosable: true,
        content: content,
        okText: '确定',
        cancelText: '取消',
        onOk: function() {
          console.log(11111)
          isOnSubcontractor({
            companyId: record.companyId,
            cpSubcontractorId: record.cpSubcontractorId,
            subcontractorId: record.subcontractorId,
            cpType: record.cpType,
            isLock: record.isOn === 0 ? 1 : 0
          }).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.loadData(1)
            } else {
              that.$message.warning(res.message)
            }
          })
        },
        onCancel(e) {
          modal.destroy()
        }
      })
    },

    handleEdit(record) {
      record.companyId = this.companyId
      this.$refs.modalEditForm.edit(record)
      this.$refs.modalEditForm.title = '编辑'
    },

    //删除服务商
    handledelete(record) {
      record.companyId = this.companyId
      let that = this
      const modal = that.$confirm({
        title: '删除服务商',
        closable: true,
        keyboard: false,
        maskClosable: true,
        content: '确认要删除该配置吗?',
        okText: '确定',
        cancelText: '取消',
        onOk: function() {
          deleteCompanySubcontractor({
            companyId: record.companyId,
            subcontractorId: record.subcontractorId,
            cpType: record.cpType,
            cpSubcontractorId: record.cpSubcontractorId
          }).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.loadData()
            } else {
              that.$error({
                title: '删除失败',
                content: res.message,
                okText: '确定',
                centered: true
              })
            }
          })
        },
        onCancel(e) {
          modal.destroy()
        }
      })
    },

    subcontractorManager(record) {
      var record1 = {}
      record1.companyId = this.companyId
      record1.subcontractorId = record.subcontractorId
      record1.cpType = record.cpType
      record1.msg = record.msg
      this.$refs.selectContractModalForm.edit(record1)
      this.$refs.selectContractModalForm.title ='企业合同-'+record.subcontractorName
      this.$refs.selectContractModalForm.disableSubmit = false
    }


  }
}
</script>
<style>
.drawer-bootom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}

.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}

.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>