<!--
 * @Description : 属性设置组件 -- 新增 -- 编辑属性
 * @Author      : jinxin
 * @Date        : 2022-10-13 13:50:19
-->
<template>
  <el-dialog :model-value="attrIsShow" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false"
    :title="attRow.attribute_id?'编辑属性值':'新增属性值'" width="440px">
    <el-form label-position="right" label-width="150px">
      <el-form-item label="所属属性" required>
        <el-select v-model="data.attrValue" placeholder="" filterable style="width: 80%;">
          <el-option v-for="(item,index) in data.attrList" :label="item.name" :value="item.attribute_id" :key="index" />
        </el-select>
      </el-form-item>

      <!-- <el-form-item :label="data.attrValueName" prop="" required> -->
      <el-form-item :label="'中文属性值名称'" prop="" required>
        <el-input v-model="data.attrName" placeholder="请输入中文属性名称" style="width: 80%;" />
      </el-form-item>
      <el-form-item :label="'英文属性值名称'" prop="" required>
        <el-input v-model="data.attrNameEn" placeholder="请输入英文属性名称" style="width: 80%;" />
      </el-form-item>

      <el-form-item label="状态:" prop="">
        <el-switch v-model="data.attrState" class="ml-2" :active-value="1" :inactive-value="0" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="text-r">
        <el-button type="primary" plain @click="commonClick('cancel')">取消</el-button>
        <el-button type="primary" @click="commonClick('sure')">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { defineComponent, onMounted, reactive, watch } from "vue";
import Request from '@/utils/request.js'
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'
export default defineComponent({
  name: 'AddAttrValue',
  props: {
    attrIsShow: Boolean,
    attRow: Object
  },
  emits: ["update:attrIsShow", 'attrSure', 'update:attRow'],
  setup (props, context) {
    // 生命周期
    onMounted(() => {
      getAttrList()
      // if (store.state.user.language.id != 1) {
      //   data.attrValueName = '英文属性值名称:'
      // }
    })
    // 创建实例
    const request = new Request()
    let store = useStore()
    // 变量
    let data = reactive({
      attrList: [],
      attrValue: '',
      attrName: '',
      attrNameEn: '',
      attrState: 1,
      id1:''
      // attrValueName: '中文属性值名称:'
    })
    // 取消 确定
    const commonClick = (type) => {
      if (type == 'sure') {
        if (data.attrValue && data.attrName && data.attrNameEn) {
          context.emit('attrSure', JSON.parse(JSON.stringify(data)))
          closeDialog()
        } else {
          return ElMessage({
            type: 'error',
            message: '所属属性、(中文/英文)属性值名称不能为空'
          })
        }
      } else {
        closeDialog()
      }
    }
    // 获取所属属性列表
    const getAttrList = () => {
      let query = {
        language_id: store.state.user.language.id,
        type:0
      }
      request.get('v1/attr/name_list', query).then(res => {
        if (res.status == 200) {
          data.attrList = res.data
        }
      })
    }
    // 关闭弹窗 清空数据
    const closeDialog = () => {
      context.emit('update:attrIsShow', false)
      context.emit('update:attRow', {attribute_id:'',value:'',value1:'',status:1})
      data.attrValue = ''
      data.attrName = ''
      data.attrNameEn = ''
      data.attrState = 1
    }
    // 监听
    watch(() => props.attRow, (newVal, oldVal) => {
      // console.log('newVal', newVal)
      data.attrValue = newVal.attribute_id
      data.attrName = newVal.value
      data.attrNameEn = newVal.value1
      data.attrState = newVal.status
      data.id1 = newVal.id1
    })
    return {
      data,
      props,
      commonClick,
      getAttrList,
      closeDialog,
    }
  }
})
</script>