<!--
 * @Description : 产品目录清单 -- 批量修改
 * @Author      : jinxin
 * @Date        : 2022-10-15 16:36:14
-->

<template>
  <div>
    <el-dialog :model-value="isBatchEditShow" :close-on-click-modal="false" :close-on-press-escape="false"
      :show-close="false" :title="data.title" width="440px" center>
      <el-form :model="data.form" label-width="100px">
        <el-form-item label="修改字段名称" required>
          <el-select placeholder="请选择名称" v-model="data.form.selVal" filterable style="width: 90%;"
            @change="selectChange">
            <el-option v-for="(item,index) in data.attrlist ? data.attrlist : []" :key="index" :label="item.name"
              :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="修改字段内容" :required="props.cusTitle == '批量修改'">
          <el-input v-model="data.form.editContent" style="width: 90%;" v-if="data.type == 'ipt'" placeholder="请输入"
            @input="changeContentVal" />
          <el-select placeholder="请选择名称" v-model="data.form.editContent" style="width: 90%;" @change="changeContentVal"
            v-if="data.type == 'sel'">
            <el-option v-for="(item,index) in data.contentlist" :key="index" :label="item.name" :value="item.id" />
          </el-select>
          <el-select v-if="data.type == 'selmh'" v-model="data.form.editContent" filterable remote reserve-keyword
            @focus="getList(query,data.url,'focus')" :remote-method="(query)=>{getList(query,data.url,'other')}"
            :popper-append-to-body="false" placeholder="可搜索">
            <el-option v-for="(it,index) in data.mlcontentlist" :key="index" :label="it.name" :value="it.id"
              @click="getSelName(it.id,it.name)"></el-option>
          </el-select>
          <el-select v-if="data.type == 'selmhsx'" v-model="data.form.editContent" filterable remote reserve-keyword
            @focus="attrGetList(data.form.editContent,data.url,data.query,'focus')"
            :remote-method="(query)=>{attrGetList(query,data.url,data.query,'other')}" :popper-append-to-body="false"
            placeholder="可搜索">
            <el-option v-for="(it,index) in data.mlcontentlist" :key="index" :label="it.value" :value="it.id"
              @click="getSelSxName(it.id,it.value)"></el-option>
          </el-select>
          <el-date-picker v-if="data.type == 'date'" v-model="data.form.editContent" type="date"
            value-format="YYYY-MM-DD" placeholder="请选择日期" :default-value="new Date()" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editCommon('cancel')">取消</el-button>
          <el-button type="primary" @click="editCommon('sure')">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { defineComponent, reactive, onMounted, getCurrentInstance, onUpdated } from 'vue'
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'
export default defineComponent({
  name: 'BatchEdit',
  props: {
    isBatchEditShow: Boolean,
    attrlist: Array,
    cusTitle: String
  },
  emits: ['update:isBatchEditShow', 'update:attrlist', 'getBatchEditObj'],
  setup (props, context) {
    // 生命周期
    onMounted(() => {
      data.attrlist = props.attrlist
      // data.attrlist = []
      // console.log('批量编辑 ---> onMounted',data.form)
    })
    onUpdated(() => {
      // 清空历史数据
      // console.log('批量编辑 ---> onUpdated',data.form)
      data.form.selVal = ''
      data.form.editContent = ''
      data.form.selMhlist = []
      data.form.attrkey = ''
      data.type = 'ipt'
      data.mlcontentlist = []
      data.selMhName = ''
      data.url = ''
      data.query = {}
    })
    // 验证
    const rules = reactive({
      name: [{ required: true }],
      value: [{ required: true }]
    })
    // 变量
    let data = reactive({
      title: props.cusTitle,
      form: {
        selVal: '',
        editContent: '',
        selMhlist: [],
        attrkey: ''
      },
      attrlist: [],
      currItem: [],
      contentlist: [],
      mlcontentlist: [],
      type: 'ipt',
      selMhName: '',
      url: '',
      query: {}
    })
    // 获取实例
    const { proxy } = getCurrentInstance()
    let store = useStore()
    // 取消 确定
    const editCommon = (type) => {
      if (type == 'sure') {
        if (props.cusTitle == '批量修改') {
          if (data.form.selVal && data.form.editContent || String(data.form.editContent) === '0') {
            context.emit('getBatchEditObj', data.form)
            store.state.user.isShowBatchEditVuex = false
            context.emit('update:isBatchEditShow', false)
          } else {
            return ElMessage({
              type: 'error',
              message: '请选择字段名称、输入字段内容'
            })
          }
        } else {
          if (data.form.selVal) {
            context.emit('getBatchEditObj', data.form)
            store.state.user.isShowBatchEditVuex = false
            context.emit('update:isBatchEditShow', false)
          } else {
            return ElMessage({
              type: 'error',
              message: '请选择字段名称'
            })
          }
        }
      } else {
        // console.log('进入 -->')
        store.state.user.isShowBatchEditVuex = false
        context.emit('update:isBatchEditShow', false)
      }
    }
    // 修改字段名发生改变
    const selectChange = (val) => {
      // console.log('改变 清空值 按类型给输入或选择框',data.attrlist)
      // console.log('attrlist --- >',data.attrlist)
      // console.log('val --- > ',val)
      data.form.editContent = ''
      data.form.attrkey = ''
      data.mlcontentlist = []
      let getAttrItem = data.attrlist.filter(it => it.name == val)
      if (getAttrItem.length > 0) {
        data.form.attrkey = getAttrItem[0].field
      }
      let tempList = data.attrlist.filter(it => it.name == val)
      if (tempList[0].type == 'ipt') {
        data.currItem = tempList[0]
        data.type = data.currItem.type
      }
      if (tempList[0].type == 'sel') {
        data.currItem = tempList[0]
        data.type = data.currItem.type
        data.contentlist = tempList[0].list
      }
      if (tempList[0].type == 'selmh') {
        data.currItem = tempList[0]
        data.type = data.currItem.type
        data.url = data.currItem.url
      }
      if (tempList[0].type == 'selmhsx') {
        data.currItem = tempList[0]
        data.type = data.currItem.type
        data.url = data.currItem.url
        data.query = data.currItem.query
      }
      if (tempList[0].type == 'date') {
        data.currItem = tempList[0]
        data.type = data.currItem.type
      }
    }
    // 修改字段内容发生改变
    const changeContentVal = (val) => {
      data.form.editContent = val
    }
    // 只能输入数字
    const isNum = (rule, value, callback) => {
      const reg = /^[0-9]*$/
      if (!reg.test(value)) {
        callback(new Error('只能输入数字'))
      } else {
        callback()
      }
    }
    // 模糊匹配
    const getList = (val, url, type) => {
      let queryPara = {
        page: 1,
        size: 5,
        value: val
      }
      if (type == 'focus') {
        if (!val) {
          proxy.$http.showLoading(false).get(url, queryPara).then(res => {
            if (res.status == 200) {
              data.mlcontentlist = res.data.data
            }
          })
        }
      }
      if (type == 'other') {
        proxy.$http.showLoading(false).get(url, queryPara).then(res => {
          if (res.status == 200) {
            data.mlcontentlist = res.data.data
          }
        })
      }
    }
    // 属性模糊匹配
    const attrGetList = (val, url, query, type) => {
      query.value = val
      if (type == 'focus') {
        if (!val) {
          proxy.$http.showLoading(false).get(url, query).then(res => {
            if (res.status == 200) {
              data.mlcontentlist = res.data.data
            }
          })
        }
      }
      if (type == 'other') {
        proxy.$http.showLoading(false).get(url, query).then(res => {
          if (res.status == 200) {
            data.mlcontentlist = res.data.data
          }
        })
      }

    }
    // 获取名字
    const getSelName = (id, name) => {
      data.form.selMhName = name
      data.form.selMhlist = [{ id, name }]
    }
    // 获取属性名字
    const getSelSxName = (id, value) => {
      data.form.selMhName = value
      data.form.selMhlist = [{ id, value }]
    }
    return {
      data,
      props,
      editCommon,
      selectChange,
      changeContentVal,
      isNum,
      getList,
      getSelName,
      attrGetList,
      getSelSxName
    }
  }
})
</script>
<style scoped>
::v-deep(.el-form-item__label) {
  width: 120px !important;
}
</style>