<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" @click.capture="handleKeyClick(key)">
          <div class="cl">
            <div class="image z u-p-t-10 u-p-l-10">
              <dk-image-input v-model="item.img" :show-input="false" :img-size="60" @input="handleEmitList" />
            </div>
            <div class="u-p-b-10 u-p-t-10  content z">
              <el-form-item label="标题" label-width="40px" class="u-m-b-10">
                <el-input v-model="item.title" size="mini" @input="handleEmitList" />
              </el-form-item>
              <el-form-item label="网址" label-width="40px" class="u-m-b-0">
                <!--                <el-input v-model="item.url" size="mini" @input="handleEmitList" />-->
                <dk-link-input v-model="item.url" :show-input="false" @input="handleEmitList" />
              </el-form-item>
            </div>
            <div class="u-p-t-5 y">
              <div><el-checkbox :value="item.show" class="u-p-b-10 u-p-t-10 u-p-r-5 z" @change="changeCheckBox(key)" /></div>
              <div><i class="el-icon-delete edit u-p-b-10 u-p-t-10 u-p-r-5" @click="handleClickDel(key)" /></div>
            </div>
          </div>
          <div class="mover"><i class="el-icon-rank" /></div>
        </li>
      </draggable>
    </ul>
    <el-button class="u-m-t-5 y" style="width: 100%;" size="mini" @click="handleClickAdd"><i class="el-icon-plus" />{{ btnName }}</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: 'DkImageUrlInput',
  components: {
    draggable,
    FormCreate: formCreate.$form()
  },
  props: {
    value: {
      default: () => {
      },
      type: [Object, Array]
    },
    btnName: {
      default: '添加数据',
      type: String
    }
  },
  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: 'DkAddonLinkInput',
            field: 'url',
            props: {
              showInput: false
            },
            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: {
    handleKeyClick(key) {
      this.clickKey = key
    },
    handleImageChange(val) {
      this.$set(this.list[this.clickKey], 'img', val[0] || '')
      this.handleEmitList()
    },
    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
    },
    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;
position: relative;
    &:first-child {
      border-top: 1px solid #ccc;
    }

    &.chosen {
      outline: 2px solid #409EFF;
      opacity: 1 !important;
    }
  .content{
    width: calc(100% - 110px);
  }
    .mover {
      cursor: move;
      position: absolute;
      background: #409EFF;
      color: #fff;
      width: 20px;
      height: 20px;
      text-align: center;
      left: 0;
      bottom: 0;
      display: none;
    }

    &:hover{
      .mover{
        display: block;
      }
    }

    .edit {
      cursor: pointer;
    }
  }
}

</style>
