<template>
  <app-card class="register-box">
    <app-list v-bind="tableOptions" ref="list">
      <div class="line"></div>
      <div class="btn-box">
        <el-button type="primary" @click="dialogVisible = true">+ 添加</el-button>
      </div>
      <template v-slot:filter-time>
        <el-date-picker
          v-model="filterDate"
          @change="changeDate"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </template>
      <template v-slot:table-x="{ row }">
        <el-button type="text" @click="handleEdit(row)">编辑</el-button>
        <el-button type="text" @click="handleDelete(row)">删除</el-button>
      </template>
    </app-list>
    <el-dialog title="添加动态变量" :visible.sync="dialogVisible" width="600px">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="width: 80%; margin: 0 auto"
      >
        <el-form-item label="变量名称：">
          <el-input v-model="ruleForm.key"></el-input>
        </el-form-item>
        <el-form-item label="变量字段：">
          <el-select v-model="ruleForm.value" placeholder="请选择">
            <el-option v-for="item in infoOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </app-card>
</template>

<script>
// 接口
import { getAppList, deleteVariable, createVariable, updateVariable } from '../api'
export default {
  data() {
    const count = []
    for (let i = 0; i < 100; i++) {
      count.push({ value: i, options: i })
    }
    return {
      value1: '',
      filterDate: '',
      options: count,
      createdStart: '',
      createdEnd: '',
      dialogVisible: false,
      ruleForm: {
        key: '',
        value: ''
      },
      infoOptions: [
        { label: '姓名', value: 'name' },
        { label: '电话', value: 'mobile' },
        { label: '身份证号码', value: 'id_number' },
        { label: '邮箱', value: 'email' },
        { label: '地址', value: 'address' },
        { label: '单位', value: 'company' },
        { label: '职位', value: 'position' },
        { label: '编号', value: 'number' },
        { label: '国籍', value: 'country' },
        { label: '省份', value: 'province' },
        { label: '城市', value: 'city' },
        { label: '行业', value: 'industry' },
        { label: '微信', value: 'wechat' }
      ]
    }
  },
  computed: {
    // 列表配置
    tableOptions() {
      return {
        limit: 10,
        remote: {
          httpRequest: getAppList,
          params: {
            key: '',
            created_time_start: this.createdStart,
            created_time_end: this.createdEnd
          }
        },
        filters: [
          {
            type: 'input',
            prop: 'key',
            label: '变量名称:'
          },
          {
            slots: 'filter-time',
            label: '创建时间:'
          }
        ],
        columns: [
          { label: '变量名称', prop: 'key' },
          {
            label: '关联变量',
            prop: 'key2',
            computed: res => {
              return this.infoOptions.find(item => res.row.value === item.value).label
            }
          },
          { label: 'id', prop: 'id' },
          { label: '创建时间', prop: 'created_time' },
          { label: '操作', slots: 'table-x' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      if (this.id) {
        updateVariable(this.ruleForm).then(res => {
          if (res.code === 0) {
            this.$message({
              message: '编辑成功',
              type: 'success'
            })
            this.dialogVisible = false
          }
          this.$refs.list.refetch(true)
        })
      } else {
        createVariable(this.ruleForm).then(res => {
          if (res.code === 0) {
            this.$message({
              message: '提交成功',
              type: 'success'
            })
            this.dialogVisible = false
          }
          this.$refs.list.refetch(true)
        })
      }
    },
    // 时间搜索
    changeDate() {
      if (this.filterDate) {
        this.createdStart = this.filterDate[0]
        this.createdEnd = this.filterDate[1]
      } else {
        this.createdStart = ''
        this.createdEnd = ''
      }
    },
    // 编辑
    handleEdit(row) {
      this.ruleForm = {
        id: row.id,
        key: row.key,
        value: row.value
      }
      this.dialogVisible = true
    },
    // 删除
    handleDelete(row) {
      this.$confirm('此操作将永久删除该变量, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteVariable({ id: row.id }).then(res => {
            if (res.code === 0) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.$refs.list.refetch(true)
            }
          })
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.register-box {
  ::v-deep {
    .el-form-item {
      margin-right: 20px !important;
    }
  }
  .line {
    // border-top: 1px solid #D6D6D6;
    height: 1px;
    background: #d6d6d6;
    margin: 8px 0 23px;
    box-sizing: border-box;
  }
  .btn-box {
    margin-bottom: 16px;
  }
}
::v-deep {
  .el-dialog__body {
    border-top: 1px solid #f0f0f0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    margin: 10px 0;
  }
}
</style>
