<template>

  <div>

    <a-row :gutter="16" style="height: 1000px">

      <!-- 查询区域 -->
      <a-col :span="19">
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="新办手机号">
                  <j-input placeholder="请输入新办手机号" v-model:value="newPhone"></j-input>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="运营商类型">
                  <j-dict-select-tag placeholder="请选择运营商类型" v-model:value="operatorType"  dictCode="operator_type" />
                </a-form-item>

              </a-col>

              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="拨测结果">
                  <j-dict-select-tag placeholder="请选择拨测结果" v-model:value="calltestResults"  dictCode="calltest_results" />
                </a-form-item>
              </a-col>

              <template v-if="toggleSearchStatus">
              </template>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <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>
      </a-col>
      <!-- 操作按钮区域 -->
<!--      <div class="table-operator">-->

<!--&lt;!&ndash;        &lt;!&ndash; 高级查询区域 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;        <a-dropdown v-if="selectedRowKeys.length > 0">&ndash;&gt;-->
<!--&lt;!&ndash;          <a-menu slot="overlay">&ndash;&gt;-->
<!--&lt;!&ndash;            <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>&ndash;&gt;-->
<!--&lt;!&ndash;          </a-menu>&ndash;&gt;-->
<!--&lt;!&ndash;          <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>&ndash;&gt;-->
<!--&lt;!&ndash;        </a-dropdown>&ndash;&gt;-->

<!--        <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>-->

<!--      </div>-->
      <!-- 查询区域-END -->

      <a-col :span="24" style="top: 10px">
        <a-card title="身份信息选择" :bordered="false">
          <!-- table区域-begin -->
          <div>
            <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
              <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
              <a style="margin-left: 24px" @click="onClearSelected">清空</a>
            </div>

            <a-table
              ref="table"
              size="middle"
              :scroll="{x:true}"
              bordered
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="ipagination"
              :loading="loading"
              :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
              class="j-table-force-nowrap"
              @change="handleTableChange">


              <template slot="action" slot-scope="text, record">


                <a-dropdown>
                  <a class="ant-dropdown-link" @click="showInfo(record)">  确认选择  </a>
                  <a-menu slot="overlay">

                    <a-menu-item v-has="'task:check:list:delete'">
                      <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                        <a>删除</a>
                      </a-popconfirm>
                    </a-menu-item>
                    <a-menu-item v-has="'task:check:list:clear'">
                      <a-popconfirm title="确定清空吗?" @confirm="() => dataDelete(record.id)">
                        <a>清空</a>
                      </a-popconfirm>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </template>

              <template v-slot:customerName="text, record">
                <a @click="showCheckDetail(record)">{{text}}</a>
              </template>
              <template v-slot:checkState="status">
                <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
              </template>
              <template v-slot:rowIndex="text,records,index">
                {{ (ipagination.current - 1) * ipagination.pageSize + Number(index)+1 }}
              </template>

            </a-table>

          </div>
          <!-- table区域 end -->
        </a-card>
      </a-col>
    </a-row>
  </div>
  <!-- 查询区域 -->
</template>

<script>


import moment from 'moment';
import {getAction} from "@api/manage";
import * as echarts from 'echarts';
import '@/assets/less/TableExpand.less'
import { JeecgListMixin } from '@/mixins/JeecgListMixin';
import { mixinDevice } from '@/utils/mixin'
export default {
  name: 'SmsCheckWorkLogList',
  mixins:[JeecgListMixin,mixinDevice],
  inject:['closeCurrent'],
  data() {
    return {
      description: '稽核工作日志管理页面',
      startDate: '',
      endDate:'',
      superFieldList:[],
      taskDate:'',
      customerNo:'',
      customerName:'',
      url: {

        queryTask: "/smsCheck/task/queryById",
        list: "/businessReminderCard/list",
        count: "/smsCheck/customerInfo/count",
        delete: "/smsCheck/customerInfo/delete",
        edit: "/smsCheck/customerInfo/edit",
        notice: "/smsCheck/customerInfo/notice",
        editCheck: "/smsCheck/customerInfo/edit/check/state",
        dataDelete: "/smsCheck/customerData/clear",
        deleteBatch:"/smsCheck/statistics/deleteBatch",
        exportXlsUrl: "/smsCheck/statistics/exportXls",
        importExcelUrl:""
      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key:'rowIndex',
          width:60,
          align:"center",
          scopedSlots: { customRender: 'rowIndex' }
        },{
          title:'身份证件号码',
          align:"left",
          sorter: true,
          dataIndex: 'cardNo',
        },{
          title:'身份证姓名',
          align:"left",
          sorter: true,
          dataIndex: 'cardName'

        },
        {
          title:'证件期限(开始日期)',
          align:"left",
          sorter: true,
          dataIndex: 'cardStartTime'
        },
        {
          title:'证件期限(截止日期)',
          align:"center",
          sorter: true,
          dataIndex: 'cardEndTime'
        },

        {
          title:'工作地址',
          align:"center",
          dataIndex: 'wordAddress'
        },
        {
          title:'营业厅地址',
          align:"center",
          sorter: true,
          dataIndex: 'businessAddress'
        },
        {
          title:'拨测结果',
          align:"center",
          dataIndex: 'calltestResults',
          customRender:function (text,record,index) {
            if (text === '1') {
              return '关机';
            } else if (text === '2') {
              return '未接通';
            }else if (text === '3') {
              return '可接通不知晓入网事宜';
            }else if (text === '4') {
              return '可接通认可办理';
            }
            return text;
          }

        },
        {
          title:'客户现用号码',
          align:"center",
          dataIndex: 'operator',
          customRender:function (text,record,index) {
            if (text === '1') {
              return '本地运营商';
            } else if (text === '2') {
              return '异地运营商';
            }
            return text;
          }
        },{
          title:'新办手机号',
          align:"center",
          sorter: true,
          dataIndex: 'newPhone'
        },
        {
          title:'运营商类型',
          align:"center",
          sorter: true,
          dataIndex: 'operatorType',
          customRender:function (text,record,index) {
            if (text === '1') {
              return '移动';
            } else if (text === '2') {
              return '联通';
            }else if (text === '3') {
              return '电信';
            }else if (text === '4') {
              return '其他';
            }
            return text;
          }
        },
        {
          title:'拨测联系电话',
          align:"center",
          sorter: true,
          dataIndex: 'phone',

        }, {
          title:'现用号码使用用途',
          align:"center",
          sorter: true,
          dataIndex: 'phonePurpose',

        },
        {
          title:'联电归属地',
          align:"center",
          sorter: true,
          dataIndex: 'address',

        }, {
          title:'现住地址(到村/小区)',
          align:"center",
          sorter: true,
          dataIndex: 'currentAddress',

        }, {
          title:'证件地址(到村/小区)',
          align:"center",
          sorter: true,
          dataIndex: 'idCardAddress',

        }, {
          title:'位置信息',
          align:"center",
          sorter: true,
          dataIndex: 'userOpenState'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align:"center",
          scopedSlots: { customRender: 'action' }
        }
      ],
      isorter:{
        column: 'checkState',
        order: 'asc',
      },
      id:'',
      queryParam:{
        cardNo:''
      },
      calltestResults:'',
      operatorType:'',
      newPhone:'',
      canvas: {},
      taskId:'',
      taskName:'',
      taskState:'',
      taskType:'',
      completed:'',
      inProgress:'',
      notStart:'',
      viewIs:'',
      checkState:'',
      Incomplete:'',
      toBeAudited:'',
      toBeRectified:'',
      pass:'',
      cardNo:'',
      autoSearch:false
    }
  },

  created() {

    const waterMarkText = '智慧运营系统';
    this.canvas = document.createElement('canvas');
    const ctx = this.canvas.getContext('2d');
    this.canvas.width = this.canvas.height = 100;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.globalAlpha = 0.08;
    ctx.font = '20px Microsoft Yahei';
    ctx.translate(50, 50);
    ctx.rotate(-Math.PI / 4);
    ctx.fillText(waterMarkText, 0, 0);
    this.cardNo = this.$route.query.cardNo;
    this.queryParam.cardNo = this.$route.query.cardNo;
    this.searchQuery();

    // this.getSuperFieldList();

  },

  computed: {
    importExcelUrl: function(){
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },

  filters: {

  },

  methods: {


    showInfo(record){
      //返回上一页面
      //this.$router.go(-1);

      //关闭当前页
      this.closeCurrent();
      this.$router.replace({ path: '/networkAccess/registration', query:{cardNo:record.cardNo,id:record.id}});
    },


    searchReset(){

        this.newPhone='',
        this.calltestResults='',
        this.operatorType='';
      let queryParam = {
        "cardNo":this.cardNo,
        "newPhone":this.newPhone,
        "calltestResults":this.calltestResults,
        "operatorType":this.operatorType
      }

      this.selectList(queryParam);
    },

    searchQuery(){
      //直接加载urT. ist接口数据
      let queryParam = {
          "cardNo":this.cardNo,
          "newPhone":this.newPhone,
          "calltestResults":this.calltestResults,
          "operatorType":this.operatorType
      }
      this.selectList(queryParam);
    },


    selectList(queryParam){

      this.loadData(null,queryParam);
    },



    // 显示上传页面
    handSubmit(record) {
      let that = this;
      let model = {
        id: record.id,
      }
      postAction(this.url.editCheck, model)
        .then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            that.loadData(that.ipagination.current);
          } else {
            that.$message.warning(res.message)
          }
        }).finally(() => {

      })
    },

    getRecentDay: function (n) {
      let day = moment(new Date())
        .subtract(n, "days")
        .format("YYYY-MM-DD");
      return day;
    },

  }
}
</script>
<style scoped>

</style>