<template>
  <div>
    <ul class="dk-image-list">
      <draggable
        v-model="list"
        chosen-class="chosen"
        force-fallback="true"
        group="people"
        handle=".mover"
        animation="300"
      >
        <li v-for="(item,key) in list" :key="key" class="item">
          <div class="cl">
            <el-checkbox :value="item.show" class="u-p-10 z" @change="changeCheckBox(key)" />
            <div class="u-p-10 mover z">{{ item.title }}</div>
            <div class="y">
              <i class="el-icon-edit-outline edit u-p-12" @click="handleClickEdit(key)" />
              <i class="el-icon-delete edit u-p-12" @click="handleClickDel(key)" />
            </div>
          </div>
        </li>
      </draggable>
    </ul>
    <el-button class="u-m-t-5 y" style="width: 100%;" size="mini" @click="handleClickAdd"><i class="el-icon-plus" /></el-button>
    <ElDialog :visible.sync="editForm.state" width="500px" append-to-body>
      <FormCreate
        v-if="editForm.state"
        :key="clickKey"
        v-model="editForm.api"
        :rule="editForm.rule"
        :option="editForm.option"
        @submit="handleClickSubmit"
      />
    </ElDialog>
  </div>
</template>

<script>
import Vue from 'vue'
import draggable from 'vuedraggable'
import formCreate from '@form-create/element-ui'

Vue.use(formCreate)
export default {
  name: 'DkOldImageUrlInputOld',
  components: {
    draggable,
    FormCreate: formCreate.$form()
  },
  props: {
    value: {
      default: () => {
      },
      type: [Object, Array]
    }
  },
  data() {
    return {
      clickKey: 0,
      editForm: {
        state: false,
        api: {},
        option: {
          form: {
            labelPosition: 'left',
            size: 'mini',
            labelWidth: '82px'
          },
          formData: { img: '', url: '', title: '默认备注名称', show: true }
        },
        rule: [
          {
            type: 'input',
            field: 'title',
            value: '',
            title: '备注名称'
          },
          {
            type: 'DkImageInput',
            field: 'img',
            value: '',
            title: '图片'
          },
          {
            type: 'switch',
            field: 'show',
            value: true,
            title: '显示'
          },
          {
            type: 'input',
            field: 'url',
            value: '',
            title: '跳转地址'
          }
        ]
      },
      list: this.value,
      clearForm: false
    }
  },
  computed: {},
  watch: {
    list() {
      this.handleEmitList()
    },
    'editForm.api': function(api) {
      if (this.clickKey === -1 && this.clearForm) {
        // 新增：初始化数据
        api.resetFields()
        this.clearForm = false
      } else {
        // 编辑：设置表单值
        api.coverValue(this.list[this.clickKey])
      }
    }
  },
  mounted() {
  },
  methods: {
    handleEmitList() {
      this.$emit('input', this.list)
    },
    handleClickSubmit(formData) {
      if (this.clickKey === -1) {
        this.list.push(formData)
      } else {
        this.$set(this.list, this.clickKey, formData)
        this.handleEmitList()
      }
      this.editForm.state = false
    },
    handleClickDel(key) {
      this.$confirm('此操作将该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.list.splice(key, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },
    handleClickAdd() {
      this.editForm.state = true
      this.clickKey = -1
      this.clearForm = true
    },
    handleClickEdit(key) {
      this.editForm.state = true
      this.clickKey = key
    },
    changeCheckBox(key) {
      this.$set(this.list[key], 'show', !this.list[key]['show'])
      this.handleEmitList()
    }
  }
}
</script>

<style scoped lang="scss">
.dk-image-list {
  li {
    background: #fff;
    line-height: 20px;
    border: 1px solid #ccc;
    border-top: none;

    &:first-child {
      border-top: 1px solid #ccc;
    }

    &.chosen {
      outline: 2px solid #409EFF;
      opacity: 1 !important;
    }

    .mover {
      cursor: move;
      width: calc(100% - 110px);
    }

    .edit {
      cursor: pointer;
    }
  }
}

</style>
