<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="98px">
      <el-form-item label="ip地址" prop="ip">
        <el-input
          v-model="queryParams.ip"
          placeholder="请输入ip地址"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="每天访问次数" prop="times">
        <el-input
          v-model="queryParams.times"
          placeholder="请输入每天访问次数"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:post:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:post:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:post:remove']"
        >删除</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ip地址" align="center" prop="ip" />
      <el-table-column label="每天访问次数" align="center" prop="times" />
      <el-table-column label="列" align="center" prop="columnNames" :formatter="homeNameFormat" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:post:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:post:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 添加或修改岗位对话框 -->
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="115px">
         <el-row>
           <el-col :span="12" >
             <el-form-item label="ip地址" prop="ip">
               <el-input v-model="form.ip" placeholder="请输入ip地址" />
             </el-form-item>
           </el-col>

           <el-col :span="12" >
             <el-form-item label="APP_SECRET" prop="appSecret">
               <el-tooltip class="item" effect="dark" :content="nhduoslei == false?'点击下方获取按钮获取' :form.appSecret" placement="top-start">
               <el-input disabled v-model="form.appSecret" placeholder="请点击下方获取信息按钮获取" />
               </el-tooltip>

             </el-form-item>
           </el-col>
           <!-- class="nhli" -->
           <el-col :span="12" >
             <el-form-item label="APPID" prop="appId">
               <el-tooltip class="item" effect="dark" :content="nhduoslei == false?'点击下方获取按钮获取' : form.appId" placement="top-start">
               <el-input v-model="form.appId" disabled placeholder="请点击下方获取信息按钮获取" />
               </el-tooltip>
               <!-- <el-button type="primary" size="mini">获取</el-button> -->
             </el-form-item>
           </el-col>
           <el-col :span="12" >
             <el-form-item label="APP_KEY" prop="appKey">
               <el-tooltip class="item" effect="dark" :content="nhduoslei == false?'点击下方获取按钮获取' : form.appKey" placement="top-start">
               <el-input v-model="form.appKey" disabled placeholder="请点击下方获取信息按钮获取" />
               </el-tooltip>
               <!-- <el-button type="primary" size="mini">获取</el-button> -->
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="强弱校验" prop="isStrong">
               <el-radio-group v-model="form.isStrong" @change="nhyeish">
                   <el-radio label="Y">强校验</el-radio>
                   <el-radio label="N">弱校验</el-radio>
                 </el-radio-group>
             </el-form-item>
           </el-col>

           <el-col :span="12">
             <el-form-item label="访问次数" prop="times">
               <el-input type="number" v-model="form.times" placeholder="请输入每天访问次数" />
             </el-form-item>
           </el-col>

           <!-- v-if="roudje" -->
           <el-col :span="24">
             <el-form-item label="请选择列" prop="columnNames">
               <el-select style="width: 100%;" v-model="form.columnNames" multiple placeholder="请选择要展示的列">
                 <el-option
                   v-for="item in roleOptions"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"
                 ></el-option>
               </el-select>
             </el-form-item>
           </el-col>
         </el-row>

        <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>

          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-row>
              <el-col :span="6" v-for="city in cities" :key="city" style="margin-bottom: 20px;">
                 <el-checkbox  :label="city" :key="city">{{city}}</el-checkbox>
              </el-col>
            </el-row>
          </el-checkbox-group> -->

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-tooltip class="item" effect="dark" content="点击按钮获取APP_SECRET,APPID,APP_KEY,每点击一次更改一次信息,请慎重操作." placement="top-start">
        <el-button @click="nholu" type="success" >获取信息</el-button>
        </el-tooltip>
        <el-button type="primary" @click="submitForm">确 定</el-button>

        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listPost, getPost, delPost, addPost, updatePost,listlie,appIdhu } from "@/api/system/postsr";
const cityOptions = ['身份证号', '姓名', '人员分类', '网格',  '联系方式', '性别','户籍地址', '备注','是否户主', '年龄', '居住地址','户编号', '与户主关系'];
export default {
  name: "Post",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      postList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 状态数据字典
      statusOptions: [],
      roleOptions:[],
      // 查询参数
      queryParams: {
        ip: undefined,
        times: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        times: [
          { required: true, message: "访问次数不能为空", trigger: "blur" }
        ],
        columnNames: [
          { required: true, message: "请选择列", trigger: "blur" }
        ],
        appKey:[
          { required: true, message: "APP_KEY必填", trigger: "blur" }
        ],
        appSecret:[
          { required: true, message: "APP_SECRET必填", trigger: "blur" }
        ],
        ip:[
          { required: true, message: "ip地址必填", trigger: "blur" }
        ],
        appId:[
          { required: true, message: "appId必填", trigger: "blur" }
        ],
        isStrong:[
          { required: true, message: "强弱校验必选", trigger: "blur" }
        ]

      },
      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: cityOptions,
      isIndeterminate: true,
      roudje:false,
      nhduoslei:false
    };
  },
  created() {
    this.getList();
    this.ndyeose()
    this.getDicts("sys_normal_disable").then(response => {
      this.statusOptions = response.data;
    });
  },
  methods: {
    homeNameFormat(row, column) {
      // console.log(row.columnNames,this.roleOptions,this.selectDictLabelss(this.roleOptions, row.columnNames),457)
      return this.selectDictLabelss(this.roleOptions, row.columnNames);
    },
    ndyeose(){
      this.loading = true;
      let nhue = {tableName:'czrk'}
      listlie('czrk').then(response => {
        this.roleOptions = response.data;
        // this.total = response.total;
        this.loading = false;
      });
    },
    handleCheckAllChange(val) {
            this.checkedCities = val ? cityOptions : [];
            this.isIndeterminate = false;
            console.log(val,456)

            if(val){
              console.log('全选')
              // this.form.userName
              // this.form.gender
              // this.form.age
              // this.form.birthday
              // this.form.idCard
              // this.form.phoneNum
              // this.form.code
              // this.form.houseType
              // this.form.yhzgx
              // this.form.provinceId
              // this.form.cityId
              // this.form.regionId
              // this.form.villageTownsId
              // this.form.villageId
              // this.form.remark
              // this.form.villagerGroupId
              // this.form.czrkJzdzList
            }
          },
  handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            console.log(value,4567)
          },
    /** 查询岗位列表 */
    getList() {
      this.loading = true;
      listPost(this.queryParams).then(response => {
        this.postList = response.data;
        // this.total = response.total;
        this.loading = false;
      });
    },
    // 岗位状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        ip: undefined,
        tableName: 'czrk',
        times: undefined,
        columnNames: undefined,
        isStrong:'Y',

      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.nhduoslei = false
      this.title = "添加信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getPost(id).then(response => {
        this.form = response.data;
        this.nhduoslei = true
        console.log(this.nhduoslei)
        this.form.tableName = 'czrk'
        if(this.form.columnNames !== null){
          this.$set(this.form,'columnNames',this.form.columnNames.split(','))
           // this.form.column_names = this.form.columnNames.split(',')
        }

        this.open = true;
        this.title = "修改信息";
      });
    },
    /** 提交按钮 */
    submitForm: function() {
      console.log(this.form,23456)
      // console.log(this.form.column_names.join(','),23456)
      if(this.form.columnNames != undefined){
        this.form.columnNames =  this.form.columnNames.join(',')
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            this.form.createBy = undefined
             this.form.createTime = undefined
             this.form.tableName = undefined
             this.form.updateBy = undefined
              this.form.updateTime = undefined
            updatePost(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addPost(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      if(row.id !== undefined){
        let huytec = []
        huytec.push(row.id)
        // let nhyes = row.id + ''
        console.log(huytec)
        // let juid = nhyes.split('')
        var   ids = huytec
        console.log(ids)

      }else{
        var ids =  this.ids;

      }
      // const ids = row.id || this.ids;
      this.$confirm('是否确认删除数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          console.log(ids)
          var id = {id:ids}
          return delPost(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/post/export', {
        ...this.queryParams
      }, `post_${new Date().getTime()}.xlsx`)
    },
    nhyeish(val){
      console.log(val,456)
      if(val == "Y"){
        this.roudje = true
      }else{
        this.roudje = false
      }
    },
    nholu(){
      appIdhu().then(response => {
        // this.form.appId = response.data.appId
        // this.form.appKey= response.appKey
        // this.form.appSecret= response.appSecret
        this.$set(this.form,'appId',response.data.appId)
        this.$set(this.form,'appKey',response.data.appKey)
        this.$set(this.form,'appSecret',response.data.appSecret)
        this.nhduoslei = true

        // if(this.form.column_names !== null){
        //   this.$set(this.form,'column_names',this.form.column_names.split(','))
        // }

      });

    }
  }
};
</script>
<style lang="scss">
  .nhli{
     .el-form-item__content{
       display: flex;
       justify-content: space-between;
       .el-input__inner {
         width: 91%;
       }
     }
  }
</style>
