<template>
  <div class="addTemplate app-container" v-loading="loading">
    <el-form
      :model="setQuery"
      ref="setQuery"
      :rules="rules"
      label-width="130px"
    >
      <el-form-item label="名称：" prop="dataCollectName">
        <el-input
          v-model="setQuery.dataCollectName"
          class="item-width-300"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="table-box">

      <el-table
        :data="setQuery.data"
        tooltip-effect="dark"
        border
        class="table"
      >
        <el-table-column
          align="center"
          label="字段名称"
          prop="dataName"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="字段类型"
          prop="dataType"
          show-overflow-tooltip
        >
         <template slot-scope="scope">
          {{scope.row.dataType | filterType}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="必填"
          prop="orderNo"
          show-overflow-tooltip
        >
         <template slot-scope="scope">
            <el-checkbox :true-label="1" :false-label="2" v-model="scope.row.requiredEnable"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="显示"
          prop="orderNo"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-checkbox :true-label="1" :false-label="2" v-model="scope.row.state"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="address" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row,scope.$index)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDel(scope.$index)">删除</el-button>
            <el-button type="text" size="small" @click="handleMoveUp(scope.$index,-1)">上移</el-button>
            <el-button type="text" size="small" @click="handleMoveDown(scope.$index,2)">下移</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button
          type="primary"
          size="small"
          @click="handleAdd"
      >
          添加
      </el-button>
    </div>

    <div class="btn-group">
       <el-button>取 消</el-button>
     <el-button type="primary" :loading="loading"  @click="save">确 定</el-button>
    </div>

    <el-dialog title="添加自定义字段" width="600px" :visible.sync="dialogFormVisible">
        <el-form
        :model="form"
        ref="form"
        :rules="rules1"
        label-width="170px"
      >
        <el-form-item label="字段名称：" prop="dataName">
          <el-input
            v-model="form.dataName"
            class="item-width-300"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型：" prop="dataType">
          <el-select v-model="form.dataType" class="item-width-300" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字段校验规则：" prop="validType"  v-if="form.dataType == 1">
          <el-select v-model="form.validType" class="item-width-300" placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <template v-if="form.dataType == 3 || form.dataType == 4">

          <el-form-item :label="'选项'+(index+1)+'：'"  v-for="(item, index) in form.content"
            :key="index"
            :prop="'content.' + index + '.value'"
            :rules="{
              required: true, message: '选项不能为空', trigger: 'blur'
            }">
            <el-input
              v-model="item.value"
              class="item-width-300"
            ></el-input>
            <el-button v-if="index" class="ml10" type="text" @click="del(index)">删除</el-button>
          </el-form-item>
          <el-button style="margin-left:130px;" type="text" @click="add">+ 新建选项</el-button>
        </template>
        <template v-if="form.dataType == 5">
          <el-form-item label="最大上传数量：" prop="num">
            <el-input
              type="number"
              v-model.number="form.num"
              class="item-width-300"
              :max="99"
              :min="1"
            ></el-input>
          </el-form-item>
          <el-form-item label="文件限制大小（MB）：" prop="size">
            <el-input
              type="number"
              v-model.number="form.size"
              class="item-width-300"
              :max="100"
            ></el-input>
          </el-form-item>
          <el-form-item label="上传类型：" prop="uploadType">
          <el-select v-model="form.uploadType" multiple  class="item-width-300" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        </template>
       
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
  </el-dialog>

  </div>
</template>

<script>
import Upload from '@/components/Upload'
import {dataTemplateAddOrUpdate,dataTemplateDetail} from '@/api/activity'
export default {
    components: {
        Upload,
    },
  data() {
    return {
        editMode:'add',
        editIndex:0,//编辑行的index
        dialogFormVisible:false,
        loading:false,
        setQuery: {
          dataCollectName: "",
          shopId: 0,
          data:[
            //   {
            //     "dataName": "",
            //     "dataType": 0,
            //     "num": 0,
            //     "requiredEnable": 0,
            //     "size": 0,
            //     "state": 0,
            //     "uploadType": "",
            //      "validType":0,
            //  }
          ],
         
        },
         form:{
              "content":[],
              "dataName": "",
              "dataType": 0,
              "num": 0,
              "requiredEnable": 0,
              "size": 0,
              "state": 0,
              "uploadType": "",
              "validType":0,
         },
        options:[
            {
              label:'单行文本',
              value:1
            },
            {
              label:'长文本',
              value:2
            },
            {
              label:'单选',
              value:3
            },
            {
              label:'多选',
              value:4
            },
             {
              label:'图片',
              value:5
            }
        ],
        options1:[
            {
              label:'无',
              value:0
            },
            {
              label:'手机号码',
              value:1
            },
            {
              label:'身份证',
              value:2
            },
            {
              label:'邮箱',
              value:3
            },
             {
              label:'数字',
              value:4
            }
        ],
         options2:[
            {
              label:'jpg',
              value:'jpg'
            },
            {
              label:'jpeg',
              value:'jpeg'
            },
            {
              label:'png',
              value:'png'
            },
        ],
         rules: {
            dataCollectName: [{ required: true, message: "请输入字段名称", trigger: "blur" }],
         },
         rules1: {
            dataName: [{ required: true, message: "请输入字段名称", trigger: "blur" }],
            num: [{ required: true, message: "请输入最大上传数量", trigger: "blur" }],
            size: [{ required: true, message: "请输入文件限制大小", trigger: "blur" }],
            dataType: [{ required: true, message: "请选择类型", trigger: "change" }],
            uploadType: [{ required: true, message: "请选择上传类型", trigger: "change" }],
         }

    };
  },
  filters: {
    filterType: function(value) {
      if(value == 1){
        return '单行文本'
      }else if(value == 2){
        return '多行文本'
      }else if(value == 3){
        return '单选'
      }else if(value == 4){
        return '多选'
      }else if(value == 5){
        return '图片'
      }
    }
  },
  methods: {
    add(){
      this.form.content.push({value:''})
    },
    del(index){
       this.form.content.splice(index,1)
    },
    submit(){
       this.$refs.form.validate((v) => {
          if (v) {
             let obj =  JSON.parse(JSON.stringify(this.form))
             obj.uploadType = obj.uploadType.toString()

            //处理单选多选  
             if(obj.content.length){
              obj.content = obj.content.map(item=>item.value)
             }
             if(this.editMode == 'add'){
               this.setQuery.data.push(obj)
             }else{
              this.$set(this.setQuery.data,this.editIndex,obj)
             }
            
             this.dialogFormVisible = false
             console.log(11111,this.setQuery);
          }
        })
    },
    handleAdd(){
      this.editMode ='add'
      this.dialogFormVisible = true
       this.form = {
              "content":[],
              "dataName": "",
              "dataType": 1,
              "num": 0,
              "requiredEnable": 1,
              "size": 0,
              "state": 1,
              "uploadType": "",
              "validType":0,
            }
    },
    handleEdit(row,index){
      console.log(row);
      this.editMode ='edit'
      this.editIndex = index
      this.form = JSON.parse(JSON.stringify(row)) 
      if(row.dataType == 3 || row.dataType == 4){
        let content = []
        this.form.content.map(item=>{
          if(!item.hasOwnProperty('value')){
            content.push({
              value:item
            })
          }
        })
        if(content.length){
          this.form.content = content
        }
      }
      if(this.form.uploadType){
        this.form.uploadType = this.form.uploadType.split(',')
      }
      this.dialogFormVisible = true

    },
    handleDel(index){
       this.setQuery.data.splice(index,1)
    },
    handleMoveUp(index,num){
      this.setQuery.data.splice(index+num,0,this.setQuery.data[index])
        this.setQuery.data.splice(index-num,1)
    },
     handleMoveDown(index,num){
      this.setQuery.data.splice(index+num,0,this.setQuery.data[index])
        this.setQuery.data.splice(index,1)
    },
   save() {
      this.$refs.setQuery.validate((v) => {
        if (v) {
          if(this.loading) return
          this.loading = true
          if(this.$route.query.mode == 'copy'){
            delete this.setQuery.id
          }
          dataTemplateAddOrUpdate(this.setQuery).then(res=>{
            this.loading = false

            if(res.state == 'Success'){

              this.$notify({
                  title: '成功',
                  message: '操作成功',
                  type: 'success'
                });
               
                  this.$router.push('/operationManage/templateManage/index')
            }
          })
              
        }
      });
    },
    dataTemplateDetail(id){
      this.loading = true
      dataTemplateDetail({id}).then(res=>{
          this.loading = false
          if(res.state == 'Success'){
            let {data,dataCollectName} = res.content
            this.setQuery.data = data
            this.setQuery.dataCollectName = dataCollectName
            this.setQuery.id = id
          }
      })
    }
  },
  created () {
    if(this.$route.query.id){
      this.dataTemplateDetail(this.$route.query.id)
    }
  },
};
</script>

<style lang="scss" scoped>
.addTemplate {
  padding-bottom: 40px;
  .table-box{
    margin-left: 130px;

    .table{
      width: 800px;
      box-sizing: border-box;
    }
  }
  .btn-group{
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>