<!--
 * @Description: create
 * @Version: 1.0
 * @Autor: XuTongZhang
 * @Date: 2020-07-28 16:24:44
 * @LastEditors: XuTongZhang
 * @LastEditTime: 2020-08-11 17:27:00
-->
<template>
  <div class="indexPage">
    <v-input :btn="btn" :list="list" @add="add"></v-input>
    <v-table
      :table="table"
      :tableList="tableList"
      :sortType="true"
      :queryData="queryData"
      @details="details"
      @editor="editor"
      @del="del"
    ></v-table>
    <v-pager @page="callPage" :total="totalrecords"></v-pager>
    <el-dialog :visible.sync="dialogFormVisible" width="650px" :before-close="close" :close-on-click-modal="false">
      <el-form :model="form" ref="form" label-width="140px" :rules="state!==2 ? rules : {}" label-position="left">
        <el-form-item label="表单名称" prop="formName">
          <el-input v-if="state!==2" v-model="form.formName" placeholder="请输入表单名称" autocomplete="off"></el-input>
          <div v-else>{{form.formName}}</div>
        </el-form-item>
        <el-form-item label="说明" prop="formIntroduce">
          <el-input v-if="state!==2" type="textarea" :rows="4" resize="none" placeholder="请输入说明" v-model="form.formIntroduce"></el-input>
          <div v-else>{{form.formIntroduce}}</div>
        </el-form-item>
        <el-form-item :label="state!==2?'选择需要的表单项':'已选择的表单项'" prop="checkList">
          <div v-if="state!==2">勾选需要的表单选项，点击生成表单即可</div>
          <el-checkbox-group v-if="state!==2" v-model="form.checkList">
            <div v-for="item in formConfigList" :key="item.id" >
              <el-checkbox :label="item.id">{{item.configName + ' ' + (item.type === 0 ? '单行输入框' : item.type === 1 ? '多行输入框' : '下拉选择框')}}</el-checkbox>
            </div>
          </el-checkbox-group>
          <div v-else>
            <div v-for="item in formConfigList.filter(i => form.checkList.includes(i.id))" :key="item.id">
              <el-input class="p10" v-if="item.type === 0" :placeholder="'请输入' + item.configName"></el-input>
              <el-input class="p10" v-else-if="item.type === 1" type="textarea" :rows="4" resize="none" :placeholder="'请输入' + item.configName"></el-input>
              <el-select class="p10" v-else :placeholder="'请选择' + item.configName"></el-select>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" v-if="state!==2" @click="determine">生成表单</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    let validcodeName = (rule, value, callback) => {
      if (!value.length) {
        callback(new Error('请选择需要的表单项'))
      } else {
        callback()
      }
    }
    return {
      tableList: [],
      dialogFormVisible: false,
      page: 1,
      state: 0,
      form: {
        formName: '',
        formIntroduce: '',
        checkList: []
      },
      formConfigList: [],
      totalrecords: 0,
      pickList: [],
      rules: {
        formName: [
          { required: true, message: '请选择活动区域', trigger: 'blur' }
        ],
        formIntroduce: [
          { required: true, message: '请选择活动区域', trigger: 'blur' }
        ],
        checkList: [
          { validator: validcodeName, trigger: 'blur' }
        ]
      },
      list: [],
      btn: [
        {
          name: '添加',
          type: 'success',
          method: 'add'
        }
      ],
      table: {
        column: [
          {
            label: '编号',
            props: 'id'
          },
          {
            label: '表单名称',
            props: 'formName'
          },
          {
            label: '说明',
            props: 'formIntroduce'
          }
        ],
        handle: [
          {
            title: '查看',
            method: 'details',
            type: 'info'
          },
          {
            title: '编辑',
            method: 'editor',
            type: 'warning'
          },
          {
            title: '删除',
            method: 'del',
            type: 'danger'
          }
        ]
      }
    }
  },
  created () {
    this.queryData()
    this.queryFormConfigList()
  },
  methods: {
    queryData (form = {}) {
      let page = this.page
      let reqdata = form
      this.$api
        .post('/form/queryFormList', {
          reqdata,
          page
        })
        .then((res) => {
          this.totalrecords = res.totalrecords
          this.tableList = res.list
        })
    },
    queryFormConfigList () {
      this.$api
        .post('/formConfig/queryFormConfigList', {
          reqdata: {},
          rows: 20
        })
        .then((res) => {
          this.formConfigList = res.list
        })
    },
    add () {
      this.open()
      this.info = {}
      this.state = 0
    },
    getDetails (row) {
      let reqdata = { id: row.id }
      this.$api
        .post('/form/queryFormDetail', {
          reqdata
        })
        .then((res) => {
          this.open()
          this.form = res.object
          this.$set(this.form, 'checkList', JSON.parse(res.object.formConfig).map(item => item.id))
        })
    },
    details (row) {
      this.getDetails(row)
      this.state = 2
    },
    editor (row) {
      this.getDetails(row)
      this.state = 1
    },
    del (row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let reqdata = { id: row.id }
        this.$api
          .post('/form/deleteForm', {
            reqdata
          })
          .then((res) => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.queryData()
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    determine () {
      let a
      this.$refs['form'].validate((valid) => {
        a = valid
      })
      if (!a) return
      let array = []
      this.form.checkList.forEach(item => {
        array.push(this.formConfigList.find(i => i.id === item))
      })
      console.log(this.form)
      let url = this.state ? '/form/updateForm' : '/form/saveForm'
      let reqdata = this.form
      reqdata.formConfig = JSON.stringify(array)
      this.$api
        .post(url, {
          reqdata
        })
        .then((res) => {
          this.close()
          this.queryData()
        })
    },
    open () {
      this.dialogFormVisible = true
    },
    close () {
      this.dialogFormVisible = false
      this.form = {
        formName: '',
        formIntroduce: '',
        checkList: []
      }
    },
    callPage (val) {
      this.page = val
      this.queryData()
    }
  },
  watch: {
    dialogFormVisible: function (val, oldVla) {
      if (this.state === 2) {
        if (this.$refs['form'] !== undefined) {
          this.$refs['form'].resetFields()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .dialog-footer {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .p10 {
    padding: 8px;
  }
</style>
