<template>
  <div class="policy-page">
    <div class="header">
      <div class="center">政策需求中心</div>
    </div>
    <div class="search center">
      <el-form :inline="true" :model="policySearchKeys" class="demo-form-inline">
        <el-form-item label="政策名称：">
          <el-input v-model="policySearchKeys.policyName" placeholder="请输入关键词"></el-input>
        </el-form-item>
        <el-form-item label="地区：">
          <el-select v-model="policySearchKeys.policyProvince" placeholder="不限">
            <el-option label="全国" value="全国"></el-option>
            <el-option label="中央" value="中央"></el-option>
            <el-option label="北京市" value="北京市"></el-option>
            <el-option label="天津市" value="天津市"></el-option>
            <el-option label="河北省" value="河北省"></el-option>
            <el-option label="山西省" value="山西省"></el-option>
            <el-option label="内蒙古" value="内蒙古"></el-option>
            <el-option label="辽宁省" value="辽宁省"></el-option>
            <el-option label="吉林省" value="吉林省"></el-option>
            <el-option label="黑龙江省" value="黑龙江省"></el-option>
            <el-option label="上海市" value="上海市"></el-option>
            <el-option label="江苏省" value="江苏省"></el-option>
            <el-option label="浙江省" value="浙江省"></el-option>
            <el-option label="安徽省" value="安徽省"></el-option>
            <el-option label="福建省" value="福建省"></el-option>
            <el-option label="江西省" value="江西省"></el-option>
            <el-option label="山东省" value="山东省"></el-option>
            <el-option label="河南省" value="河南省"></el-option>
            <el-option label="湖北省" value="湖北省"></el-option>
            <el-option label="湖南省" value="湖南省"></el-option>
            <el-option label="广东省" value="广东省"></el-option>
            <el-option label="广西" value="广西"></el-option>
            <el-option label="海南省" value="海南省"></el-option>
            <el-option label="重庆市" value="重庆市"></el-option>
            <el-option label="四川省" value="四川省"></el-option>
            <el-option label="贵州省" value="贵州省"></el-option>
            <el-option label="云南省" value="云南省"></el-option>
            <el-option label="西藏自治区" value="西藏自治区"></el-option>
            <el-option label="陕西省" value="陕西省"></el-option>
            <el-option label="甘肃省" value="甘肃省"></el-option>
            <el-option label="青海省" value="青海省"></el-option>
            <el-option label="宁夏" value="宁夏"></el-option>
            <el-option label="新疆维吾尔自治区" value="新疆维吾尔自治区"></el-option>
            <el-option label="台湾省" value="台湾省"></el-option>
            <el-option label="香港特别行政区" value="香港特别行政区"></el-option>
            <el-option label="澳门特别行政区" value="澳门特别行政区"></el-option>
            <el-option label="海外" value="海外"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="政策类型：">
          <el-select v-model="policySearchKeys.policyType" placeholder="不限">
            <el-option label="不限" value=" "></el-option>
            <el-option label="行政措施" value="zdfc"></el-option>
            <el-option label="金融贷款" value="jrdk"></el-option>
            <el-option label="税收优惠" value="ssjm"></el-option>
            <el-option label="租金减免" value="fzbt"></el-option>
            <el-option label="人力资源" value="rlzy"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户意向：">
          <el-select v-model="policySearchKeys.customerIntention" placeholder="全部">
            <el-option label="全部" value=" "></el-option>
            <el-option label="有意向" value="yyx"></el-option>
            <el-option label="无意向" value="wyx"></el-option>
            <el-option label="暂无跟进" value="dgj"></el-option>
          </el-select>
        </el-form-item>
        <span>申请日期:</span>
        <el-date-picker v-model="chooseDate" type="datetime" placeholder="选择日期时间"></el-date-picker>
        <el-form-item class="selfwidth">
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="showdata center">
      <div class="lists center">
        <el-table :data="policeData" v-loading="loading" max-height="440px">
          <el-table-column prop="policyNo" label="政策编号" align="center" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.policyNo ? scope.row.policyNo : "---" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="policyName"
            label="政策名称"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.policyName ? "《"+scope.row.policyName+"》" : "---" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="policyProvince" label="地区" align="center" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.policyProvince ? scope.row.policyProvince : "---" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="policyType" label="政策类型" align="center" width="90">
            <template slot-scope="scope">
              <span>{{ scope.row.policyType ? scope.row.policyType=='zdfc'?'行政措施': scope.row.policyType=='fzbz'?'租金减免': scope.row.policyType=='jrdk'?'金融贷款':scope.row.policyType=='ssjm'?'税收优惠':scope.row.policyType=='rlzy'?'人力资源':"":"---" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="contacts" label="客户姓名" align="center" width="90">
            <template slot-scope="scope">
              <span>{{ scope.row.contacts ? scope.row.contacts : "---" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="客户电话" align="center" width="130">
            <template slot-scope="scope">
              <span>{{ scope.row.mobile ? scope.row.mobile : "---" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="company"
            label="公司名称"
            align="center"
            min-width="100"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.company ? scope.row.company : "---" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="industry" label="所属行业" align="center" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.industry ? scope.row.industry : "---" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="customerIntention" label="客户意向" align="center" width="90">
            <template slot-scope="scope">
              <span>{{ scope.row.customerIntention ? scope.row.customerIntention=='yyx'?"有意向": scope.row.customerIntention=='wyx'?"无意向":scope.row.customerIntention=='dgj'?"暂无跟进": "":"---" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="applyDate" label="申请日期" align="center" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.applyDate ? scope.row.applyDate.split("T")[0]:"---" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="note" label="操作" align="center">
            <el-button type="text">备注</el-button>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="20"
          layout="total, prev, pager, next"
          :total="this.policeData.length"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getPolicyNeedList, submitPolicyNeedNotes } from "@/api/policy.js";
export default {
  data() {
    return {
      policySearchKeys: {
        policyName: "",
        policyProvince: "",
        policyType: "",
        customerIntention: ""
      },
      // 日期选择器
      chooseDate: "",

      // 表单数据
      policeData: [],
      currentPage: 1,
      // loading动画
      loading: false
    };
  },
  created() {
    this.loading = true;
    getPolicyNeedList({
      policyName: "",
      policyProvince: "",
      policyCity: "",
      policyType: "",
      customerIntention: "",
      pageSize: "20",
      pageIndex: "1"
    }).then(res => {
      console.log("初始的查询的全部数据", res);
      if (res.status == 0) {
        this.policeData = res.data;
        this.loading = false;
      }
    });

    // submitPolicyNeedNotes().then(res => {
    //   console.log(res);
    // });
  },
  methods: {
    // 点击查询，提交查询参数
    onSubmit() {
      console.log("submit!");
      // 提交查询的字段
      let params = {
        policyName: this.policySearchKeys.policyName,
        policyProvince: this.policySearchKeys.policyProvince,
        policyCity: "",
        policyType: this.policySearchKeys.policyType,
        customerIntention: this.policySearchKeys.customerIntention,
        pageSize: "20",
        pageIndex: "1"
      };
      console.log("点击按钮提交查询参数", params);
      this.loading = true;
      getPolicyNeedList(params).then(res => {
        console.log("查询后的数据", res);
        if (res.status == 0) {
          this.policeData = res.data;
          this.loading = false;
        }
      });
    },

    // 分页器
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style lang="scss" >
.policy-page {
  .center {
    width: 1200px;
    margin: 0 auto;
  }
  .header {
    height: 60px;
    width: 100%;
    line-height: 60px;
    background: #000;
    color: #fff;
    font-size: 18px;
    /* padding-left: 20px; */
  }
  .search {
    background: rgba(247, 248, 252, 1);
    margin-bottom: 10px;
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    .el-form {
      .el-form-item {
        .el-form-item__label {
          padding-right: 0px;
        }
        .el-form-item__content {
          width: 120px;
        }
      }
      .selfwidth {
        width: 80px;
      }
      .el-date-editor {
        width: 200px;
        margin: 0 20px;
      }
    }
  }
  .showdata {
    min-height: 500px;
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    .lists {
      flex: 1;
      .el-table {
        width: 1198px;
        /*  */
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #333333;
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
          background: rgba(247, 248, 252, 1);
        }
        .el-table__body-wrapper {
          .el-table__row {
            td {
              height: 20px;
              padding-bottom: 0;
              padding-top: 0;
            }
          }
        }
      }
    }
    .pagination {
      width: 1198px;
      height: 60px;
      background: rgba(247, 248, 252, 1);
      margin: 0 auto;
      text-align: right;
      .el-pagination {
        margin: 15px 0;
      }
    }
  }
}
</style>