<template>
  <div>
    <a-card :bordered="false">
      <topTitle :title="description"></topTitle>
      <div class="table-page-search-wrapper seartop">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="免申即享项目标题">
                <a-input placeholder="免申即享项目标题" v-model="queryParam.title" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="截止日期" class="date_box">
                <a-date-picker size="large" valueFormat="YYYY/MM/DD" :format="timeFormatList"
                  v-model="queryParam.cashingDeadline">
                </a-date-picker>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" class="searchBut">查询</a-button>
                <a-button type="primary" @click="searchReset" class="resetBut" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <!-- 表格 -->
    <a-card class="secord" :bordered="false">
      <!-- <div class="new-add"><a-button @click="handleAdd" type="primary">新增免申即享项目</a-button></div> -->
      <div>
        <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
          :loading="loading" :pagination="false">
          <span slot="status" slot-scope="text, record">
            <span v-if="text == 3" class="gray-color">已发布</span>
            <span v-if="text == 2">待发布</span>
            <span v-if="text == 1">暂存</span>
          </span>
          <span slot="cashingStartDate" slot-scope="text, record">
            <span>{{ text }} - {{ record.cashingDeadline }}</span>
          </span>
          <span slot="releaseDate" slot-scope="text, record">
            <span v-if="record.status == 3">{{ record.releaseDate }}</span>
            <span v-else>-</span>
          </span>
          <span slot="action" slot-scope="text, record">
            <a @click="handleAdd(record)">修改</a>
          </span>
        </a-table>
        <div class="myPagination">
          <el-pagination ref="elpagination" @current-change="changeNum" :current-page="ipagination.current" background
            :page-size="ipagination.pageSize" layout="prev, pager, next,jumper, slot ,total " :total="ipagination.total">
            <el-button class="btn-sure" size="mini">确定</el-button>
          </el-pagination>
        </div>
      </div>

    </a-card>
    <!-- 第一个弹框 -->
    <a-modal title="编辑企业信息" :width="1000" :visible="visible2" :confirmLoading="confirmLoading2" @cancel="handleCancel2"
      cancelText="关闭" :footer="false">
      <div class="el-dialog-div">
        <topTitle2 :title="description1"></topTitle2>
        <div class="button-div">
          <div class="new-add" style="margin-right: 20px;">
            <a-upload name="file" :showUploadList="false" :multiple="false" accept=".xlsx,.xls" :headers="tokenHeader"
              :action="importExcelUrl + currentId" @change="handleChangeExcel">
              <a-button type="primary">导入企业信息</a-button>
            </a-upload>

          </div>
          <div class="new-add"><a-button @click="firmAdd" type="primary">新增企业信息</a-button></div>
        </div>
        <div>
          <a-table ref="table2" size="middle" bordered rowKey="id" :columns="columns2" :dataSource="dataSource2"
            :loading="loading2" :pagination="false">
            <span slot="action" slot-scope="text, record">
              <a @click="firmEdit(record)">修改</a>
              <a-divider type="vertical" />
              <a-popconfirm ok-text="确定" cancel-text="取消" overlayClassName="popDete" placement="bottomRight"
                @confirm="() => handleDelete2(record.id)">
                <span slot="icon"></span>
                <span slot="title">
                  <!-- <div @click="hide">2</div> -->
                  <div>删除的操作不可逆，确定吗？</div>
                </span>
                <a class="red-color">删除</a>
              </a-popconfirm>
            </span>
          </a-table>
          <div class="myPagination">
            <el-pagination ref="elpagination2" @current-change="changeNum2" :current-page="queryfirm.pageNo" background
              :page-size="queryfirm.pageSize" layout="prev, pager, next,jumper, slot ,total " :total="total2">
              <el-button class="btn-sure" size="mini">确定</el-button>
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="footer-box2">
        <a-button type="primary" @click="handleCancel2" class="searchBut">确定</a-button>
        <a-button @click="handleCancel2" class="resetBut" style="margin-left: 8px">取消</a-button>
      </div>
    </a-modal>

    <!--第二个弹框 新增企业信息 -->
    <a-modal :title="title3" centered :width="600" :zIndex="2100" :visible="visible3" :confirmLoading="confirmLoading3"
      @ok="handleOk3" @cancel="handleCancel3" cancelText="关闭" :footer="false">
      <div class="form-box">
        <!-- <topTitle2 :title="description1"></topTitle2> -->
        <a-form-model :model="model3" ref="ruleForm3" :rules="rulesForm3">
          <div class="type_line">
            <a-form-model-item label="单位详细名称" prop="companyName">
              <a-input v-model="model3.companyName" :disabled="disableSubmit3" placeholder="请填写单位详细名称" />
            </a-form-model-item>
          </div>
          <div class="type_line">
            <a-form-model-item label="法定代表人" prop="legalPerson">
              <a-input v-model="model3.legalPerson" :disabled="disableSubmit3" placeholder="请填写法定代表人" />
            </a-form-model-item>
          </div>
          <div class="type_line">
            <a-form-model-item label="统一社会信用代码" prop="socialCreditCode">
              <a-input v-model="model3.socialCreditCode" :disabled="disableSubmit3" placeholder="请填写统一社会信用代码" />
            </a-form-model-item>
          </div>
          <div class="type_line">
            <a-form-model-item label="联系电话" prop="contactNumber">
              <a-input v-model="model3.contactNumber" :disabled="disableSubmit3" placeholder="请填写联系电话" />
            </a-form-model-item>
          </div>
          <div class="type_line">
            <a-form-model-item label="电子邮箱" prop="emailAddress">
              <a-input v-model="model3.emailAddress" :disabled="disableSubmit3" placeholder="请填写电子邮箱" />
            </a-form-model-item>
          </div>
        </a-form-model>
      </div>
      <div class="footer-box">
        <a-button type="primary" @click="handleOk3()" class="searchBut">确认提交</a-button>
        <a-button @click="handleCancel3" class="resetBut" style="margin-left: 8px">取消</a-button>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction, httpAction, postAction, deleteAction } from '@/api/manage'
import topTitle from '@/views/components/topTitle'
import topTitle2 from '@/views/components/topTitle2'
export default {
  name: 'exemptionmanage',
  components: {
    topTitle,
    topTitle2
  },
  mixins: [JeecgListMixin],
  data () {
    let ellipsis = (v, l = 20) => (<j-ellipsis value={v} length={l} />)
    return {
      description: '免申即享企业管理',
      description1: '编辑企业信息',
      exemptable: false,
      columns: [
        {
          title: '免申即享项目标题',
          align: 'center',
          dataIndex: 'title',
          customRender: (t) => ellipsis(t)
        },
        {
          title: '主管部门',
          align: 'center',
          dataIndex: 'mainDept'
        },
        {
          title: '发布时间',
          align: 'center',
          dataIndex: 'releaseTime',
          scopedSlots: { customRender: 'releaseTime' },

        },
        {
          title: '兑现时间段',
          align: 'center',
          dataIndex: 'cashingStartDate',
          scopedSlots: { customRender: 'cashingStartDate' },
        },
        {
          title: '项目状态',
          align: 'center',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          // width: 147,
          // fixed: "right",
          align: 'center',
          scopedSlots: { customRender: 'action' },
        }
      ],
      dataSource: [],
      columns2: [
        {
          title: '单位详细名称',
          align: 'center',
          dataIndex: 'companyName',
        },
        {
          title: '法定代表人',
          align: 'center',
          dataIndex: 'legalPerson'
        },
        {
          title: '统一社会信用代码',
          align: 'center',
          dataIndex: 'socialCreditCode',

        },
        {
          title: '联系电话',
          align: 'center',
          dataIndex: 'contactNumber',
        },
        {
          title: '电子邮箱',
          align: 'center',
          dataIndex: 'emailAddress',
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: 147,
          // fixed: "right",
          align: 'center',
          scopedSlots: { customRender: 'action' },
        }
      ],
      confirmLoading2: false,
      visible2: false,
      dataSource2: [],
      loading2: false,
      total2: null,
      timeFormatList: 'YYYY/MM/DD',
      url: {
        list: '/enjoy/hqFreeEnjoy/list',
        detail: '/enjoy/hqFreeEnjoy/queryById',
        add: '/enjoy/hqCompany/addHqCompany',
        edit: '/enjoy/hqCompany/edit',
        importExcelUrl: 'enjoy/hqCompany/importExcel?freeEnjoyId=',
      },
      title3: '新增企业信息',
      confirmLoading3: false,
      visible3: false,
      model3: {},
      disableSubmit3: false,
      rulesForm3: {
        companyName: [{ required: true, message: '请填写单位详细名称' }],
        legalPerson: [{ required: true, message: '请填写法定代表人' }],
        socialCreditCode: [{ required: true, message: '请填写统一社会信用代码' }],
        contactNumber: [{ required: true, message: '请填写联系电话' }],
        emailAddress: [{ required: true, message: '请填写电子邮箱' }],
      },
      //当前免审企业项目id
      currentId: '',
      //免审企业列表请求参数
      queryfirm: {
        pageNo: 1,
        pageSize: 10,
        freeEnjoyId: '',
      }
    }
  },
  computed: {
    importExcelUrl () {
      return `${window._CONFIG['domianURL']}${this.url.importExcelUrl}`
    }
  },
  methods: {
    changeNum (val) {
      this.ipagination.current = val
    },
    changeNum2 (val) {
      this.queryfirm.pageNo = val
    },
    handleAdd (record) {
      // console.log(record);
      this.currentId = record.id
      this.queryfirm.freeEnjoyId = record.id
      this.getFirmList()
      this.visible2 = true

    },
    getFirmList () {
      getAction("/enjoy/hqCompany/selectHqCompanyList", this.queryfirm).then(e => {
        if (e.code == 200) {
          this.dataSource2 = e.result.records
          this.total2 = e.result.total
        }
      })
    },
    handleCancel2 () {
      this.visible2 = false
    },
    handleDelete2 (id) {
      deleteAction('/enjoy/hqCompany/delete', {
        id: id
      }).then((res) => {
        if (res.success) {
          //重新计算分页问题
          this.$message.success(res.message);
          this.queryfirm.pageNo = 1
          this.getFirmList()
        } else {
          this.$message.warning(res.message);
        }
      });
    },
    handleChangeExcel (info) {
      // console.log(info);
      if (info.file.status !== 'uploading') {
        // console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} 导入成功`);
        this.queryfirm.pageNo = 1
        this.getFirmList()
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 导入失败`);
      }
      // if (info.file.status == "done") {
      //   this.$message.success(`${info.file.name} 导入成功`);
      //   this.queryfirm.pageNo = 1
      //   this.getFirmList()
      // } else {
      //   this.$message.success(`${info.file.name} 导入失败`);
      // }

    },
    firmAdd () {
      this.visible3 = true

    },
    firmEdit (record) {
      this.model3 = Object.assign({}, record)
      this.visible3 = true
    },

    // 新增企业信息提交
    handleOk3 () {
      this.$refs.ruleForm3.validate(valid => {
        if (valid) {
          this.model3.freeEnjoyId = this.currentId
          this.save()
        } else {
          this.$message.warning('请完善表单数据')
        }
      })
    },
    //保存
    save () {
      this.confirmLoading3 = true
      let httpUrl = this.url.add,
        method = 'post'
      if (this.model3.id) {
        httpUrl = this.url.edit
        method = 'put'
      }
      httpAction(httpUrl, this.model3, method)
        .then((res) => {
          if (res.success) {
            this.$message.info('保存成功')
          } else {
            this.$message.error('保存失败，请检查网络设置');
          }
          this.getFirmList()
          this.confirmLoading3 = false
          this.visible3 = false
          this.model3 = {}
        })
        .finally(() => {
          this.confirmLoading3 = false
        })
    },
    // 新增企业信息取消
    handleCancel3 () {
      this.visible3 = false
    },
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/shaDow.less';
@import '~@assets/less/tableCommon.less';

.secord,
.seartop {
  margin-top: 20px;
}

.red-color {
  color: red;
}

.table-page-search-wrapper .ant-form-inline .ant-form-item {
  margin-bottom: 10px;
}

.table-page-search-wrapper .table-page-search-submitButtons {
  margin-bottom: 10px;
}

::v-deep .seartop .ant-form-inline .ant-form-item>.ant-form-item-label {
  padding-right: 0;
  line-height: 38px;

}

.type_line {
  display: flex;

  ::v-deep .ant-form-item-label {
    width: 26%;
    line-height: 20px;
  }

  ::v-deep .ant-form-item-control-wrapper {
    width: 70%;
    // padding-left: 15px;
  }

  ::v-deep .ant-form-item-control {
    height: 40px;
  }

  .ant-form-item {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 18px;
  }

  // .ant-input {
  //   height: 38px;
  // }
}

.footer-box {
  display: flex;
  justify-content: end;
  margin-top: 10px;
  margin-right: 4%;
}

.footer-box2 {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.new-add {
  display: flex;
  justify-content: end;
  margin-bottom: 15px;
}

.searchBut {
  border-radius: 2px;
  opacity: 1;
  height: 38px;
  line-height: 38px;
  font-size: 14px;
}

.resetBut {
  width: 60px;
  height: 38px;
  line-height: 38px;
  background: #dbdbdb;
  border-radius: 2px;
  color: #000;
  opacity: 1;
  padding: 0;
  border: 1px solid #b6b6b6;
}

.date_box {
  ::v-deep .ant-calendar-picker {
    width: 90% !important;

    .ant-input {
      border-radius: 2px;
      height: 38px;
      line-height: 38px;
    }

    .ant-input-lg {
      font-size: 14px;
    }
  }
}

.myPagination {
  margin-top: 40px;
  display: flex;
  justify-content: end;

  ::v-deep .el-pagination {
    font-weight: 600;

    .btn-sure {
      background: #dbdbdb;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      border: 1px solid #b6b6b6;
      padding: 0;
      color: #000;
      margin: 0 20px 0 10px;
      width: 50px;


    }

    .el-select .el-input .el-input__inner {
      color: #000;
      font-size: 14px;
      padding-right: 17px;
      font-weight: 400;
      border-radius: 2px;
    }

    .el-pager li {
      font-size: 16px;
      color: #888888;
      width: 34px;

      &:hover {
        opacity: 0.9;
      }
    }

    .el-pagination span:not([class*='suffix']) {
      font-size: 14px;
      color: #888888;
    }

    .el-pager li:not(.disabled).active {
      color: #fff;
    }
  }

  .ant-pagination {
    color: #888888;
  }

  ::v-deep .ant-select-selection--single {
    height: 28px !important;
  }

  ::v-deep .ant-select-selection__rendered {
    line-height: 28px !important;
  }

  ::v-deep .ant-pagination.mini .ant-pagination-options-quick-jumper input {
    height: 28px;
  }

  ::v-deep .ant-pagination.mini .ant-pagination-item {
    font-size: 16px;
    height: 28px;
    line-height: 28px;
    width: 34px;
  }
}


.el-dialog-div {
  width: 95%;
  max-height: 600px;
  overflow-x: hidden;
  margin: auto;

  .button-div {
    width: 100%;
    display: flex;
    justify-content: right;
    align-items: center;
  }
}
</style>