<template>
  <div>
    <a-card :bordered="false">
      <topTitle :title="description"></topTitle>
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper seartop">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <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="免申即享项目状态">
                <a-select v-model="queryParam.status" allowClear placeholder="请选择免申即享项目状态">
                  <a-select-option value="3"> 已发布 </a-select-option>
                  <a-select-option value="2"> 待发布 </a-select-option>
                  <a-select-option value="1"> 暂存 </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="区域">
                <a-tree-select :replaceFields="areaDataProps" treeNodeFilterProp="title" allow-clear show-search
                  v-model="queryParam.addressCode" style="width: 100%" :tree-data="areaData"
                  search-placeholder="请输入区域关键字" />
                <!-- <j-dict-select-tag v-model="queryParam.dbType" placeholder="请选择政策来源" dict-code="database_type" /> -->
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="主管部门">
                <a-input placeholder="请选择主管部门" v-model="queryParam.mainDept" />

                <!-- <j-dict-select-tag v-model="queryParam.dbType" placeholder="请选择政策来源" dict-code="database_type" /> -->
              </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>


      <!-- 表单区域 -->
      <release ref="modalForm" @ok="modalFormOk" />

    </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="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="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="action" slot-scope="text, record">
            <a @click="handleDetail2(record)">查看</a>
            <a-divider v-if="record.status != 3" type="vertical" />
            <a v-if="record.status == 2 || record.status == 1" @click="handleEdit2(record)">编辑</a>
            <a-divider type="vertical" v-if="record.status == 3" />
            <a-popconfirm ok-text="确定" cancel-text="取消" overlayClassName="popDete" placement="bottomRight"
              @confirm="() => closePublish(record.id)">
              <span slot="icon"></span>
              <span slot="title">
                <!-- <div @click="hide">2</div> -->
                <div>确定要撤回吗？</div>
              </span>
              <a v-if="record.status == 3" class="red-color">撤回</a>
            </a-popconfirm>
            <a-divider type="vertical" v-if="record.status != 3" />
            <a-popconfirm ok-text="确定" cancel-text="取消" overlayClassName="popDete" placement="bottomRight"
              @confirm="() => closePublish(record.id)">
              <span slot="icon"></span>
              <span slot="title">
                <!-- <div @click="hide">2</div> -->
                <div>确定要取消发布吗？</div>
              </span>
              <a v-if="record.status == 2" class="red-color">取消发布</a>
            </a-popconfirm>
            <a-popconfirm ok-text="确定" cancel-text="取消" overlayClassName="popDete" placement="bottomRight"
              @confirm="() => handleDelete(record.id)">
              <span slot="icon"></span>
              <span slot="title">
                <!-- <div @click="hide">2</div> -->
                <div>删除的操作不可逆，确定吗？</div>
              </span>
              <a class="red-color" v-if="record.status == 1">删除</a>
            </a-popconfirm>
          </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>
      <!-- table区域-end -->
    </a-card>
  </div>
</template>

<script>
import JEllipsis from '@/components/jeecg/JEllipsis'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import release from './release'
import topTitle from '@/views/components/topTitle'
import { httpAction, postAction, getAction } from '@/api/manage'
import { repealPublish } from './api'

export default {
  name: 'SysDataSourceList',
  mixins: [JeecgListMixin],
  components: { release, topTitle, JEllipsis },
  data () {
    let ellipsis = (v, l = 20) => (<j-ellipsis value={v} length={l} />)
    return {
      description: '免申即享信息发布',
      // 表头
      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: [],
      url: {
        list: '/enjoy/hqFreeEnjoy/list',
        delete: '/enjoy/hqFreeEnjoy/delete',
        detail: '/enjoy/hqFreeEnjoy/queryById'

        // deleteBatch: '/sys/dataSource/deleteBatch',
        // exportXlsUrl: 'sys/dataSource/exportXls',
        // importExcelUrl: 'sys/dataSource/importExcel',
      },
      //区域列表
      areaData: [],
      areaDataProps: {
        children: 'children',
        title: 'areaName',
        key: 'areaCode',
        value: 'areaCode'
      },
    }
  },
  computed: {
    importExcelUrl () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  created () {
    this.getAreaList()
  },
  methods: {
    changeNum (val) {
      // console.log('2');
      this.ipagination.current = val
      this.loadData()
    },
    //撤销发布
    closePublish (val) {
      // console.log(val);
      repealPublish(val).then(res => {
        if (res.code == 200) {
          this.$message.info('操作成功')
          this.loadData();
        } else {
          this.$message.info(res.message)

        }


      })
    },
    // 编辑
    handleEdit2: function (record) {
      getAction(this.url.detail, { id: record.id }).then(res => {
        // console.log(res);
        this.$refs.modalForm.edit(res.result);
        this.$refs.modalForm.title = "编辑";
        this.$refs.modalForm.disableSubmit = false;
      })
    },
    // 查看
    handleDetail2: function (record) {
      getAction(this.url.detail, { id: record.id }).then(res => {
        // console.log(res);
        this.$refs.modalForm.edit(res.result);
        this.$refs.modalForm.title = "详情";
        this.$refs.modalForm.disableSubmit = true;
      })

    },
    getAreaList () {
      getAction("gtSysArea/allList").then(e => {
        if (e.code == 200) {
          this.areaData = e.result
          // this.treeData = newArr
          // console.log(e);
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
@import '~@assets/less/shaDow.less';
@import '~@assets/less/tableCommon.less';

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

.red-color {
  color: red;
}

.gray-color {
  color: #999999;
}

.ant-table {
  color: #00000085;
}

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

::v-deep .ant-form-item-children .ant-input {
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  border-radius: 2px;
}

::v-deep .ant-select-selection--single {
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  border-radius: 2px;
}

::v-deep .ant-select-selection__rendered {
  height: 38px;
  line-height: 38px;
}

.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;
}

.ant-alert-info {
  background-color: #fff;
  border: none;

  .clearBut {
    // width: 60px;
    height: 38px;
    background: #ffffff;
    border-radius: 2px 2px 2px 2px;
    opacity: 1;

    letter-spacing: 0px;
    padding: 0 14px;
    margin-left: 16px;
  }
}

.ant-alert {
  padding-left: 0;
}

.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;
  width: 35%;
}

.table-operator {
  .ant-btn {
    height: 38px;
    line-height: 38px;

    border-radius: 2px 2px 2px 2px;
    opacity: 1;

    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;

    margin: 0 16px 6px 0;
    padding: 0 14px;
  }

  .noImp {
    margin: 0 0 8px 0;
  }
}

::v-deep .ant-popover-message-title {
  padding-left: 0;
}

::v-deep .ant-popover-buttons {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;

  .ant-btn-primary {
    width: 52px;
    height: 28px;
    line-height: 28px;

    border-radius: 2px 2px 2px 2px;
    // color: #fff;
    opacity: 1;
    // border: 1px solid #4717f6 !important;

    // &:hover {
    //   color: #fff !important;

    // }
  }

  .ant-btn {
    width: 52px;
    height: 28px;
    line-height: 28px;
    // background: #ffffff;
    border-radius: 2px 2px 2px 2px;
    opacity: 1;
    padding: 0;
    // 
  }
}

a {}

.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;
  }
}

::v-deep .ant-tooltip-inner {

  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.302);
}

//滚动条
::v-deep ::-webkit-scrollbar-thumb {

  border-radius: 9px 9px 9px 9px;
}
</style>