<!--
 * @Description : 重构
 * @Author      : jinxin
 * @Date        : 2022-10-12 14:26:54
-->
<template>
  <el-main class="bg_white" style="min-height: calc( 100% - 80px )">
    <!--顶部搜索-->
    <CommonSeach v-model:diySerach="data.diySerach" @getChangeValue="getChangeValue" @getSeachData="getSeachData"
      @clearValue="clearValue">
    </CommonSeach>
    <!-- 新增属性按钮 -->
    <el-row class="title_box_prop">
      <el-col :span="24">
        <el-button type="primary" @click="handleEdit('', 'add')">新增属性值</el-button>
      </el-col>
    </el-row>
    <!---产品列表-->
    <div class="table">
      <el-table :data="data.list" border fit highlight-current-row>
        <el-table-column align="center" prop="attribute_value_id" label="属性ID" width="95"></el-table-column>
        <el-table-column label="属性名称" prop="name" align="center" width="300"></el-table-column>
        <el-table-column label="属性值名称" prop="value" align="center"></el-table-column>
        <el-table-column label="属性值状态" align="center" width="150">
          <template #default="scope">
            <el-switch v-model="scope.row.status" class="ml-2" :active-value=1 :inactive-value=0
              @change="handleSwitch(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="150" label="操作" prop="" align="center">
          <template #default="scope">
            <el-button title="编辑" type="text" @click="handleEdit(scope.row, 'edit')">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="m-t-20 m-b-20" :current-page="query_form.page" :page-sizes="[50, 100, 150]"
        :page-size="query_form.size" layout="total, sizes, prev, pager, next, jumper" :total="data.count"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" small>
      </el-pagination>
    </div>
    <!-- 新增属性值 -->
    <div>
      <AddAttrValue v-model:attrIsShow="data.attrIsShow" v-model:attRow="data.attRow" @attrSure="attrSure">
      </AddAttrValue>
    </div>
    <div>
      <!-- 语言选择 -->
      <!-- <LanguageSelect v-model:isShow="data.isShow" @getLanguageId="getLanguageId"></LanguageSelect> -->
      <!-- 语言提示 -->
      <!-- <LanguageTiptool v-model:isShowLanguageTipTool="data.isShow" @noticeShowBatch="noticeShowBatch"></LanguageTiptool> -->
    </div>
  </el-main>
</template>
<script>
import LanguageSelect from '../components/LanguageSelect/LanguageSelect.vue'
import AddAttrValue from '@/views/components/AddAttrValue/AddAttrValue.vue'
import CommonSeach from '@/views/components/CommonSeach/CommonSeach.vue'
import LanguageTiptool from '@/views/components/ProductListCom/LanguageTiptool.vue'
import { reactive, onMounted, getCurrentInstance } from 'vue'
import Request from '@/utils/request.js'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
export default {
  name: 'Brand',
  components: {
    LanguageSelect,
    AddAttrValue,
    CommonSeach,
    LanguageTiptool
  },
  setup () {
    let data = reactive({
      childrenObj: {
        languageId: '',
        addAttrObj: {},
      },
      isShow: false,
      attrIsShow: false,
      attRow: {},
      attrType: '',
      diySerach: [],
      count: 0,
      num: 1,
      value: '',
      type: 'edit',
      language_id: 0,
      attribute_id: '',
      list: [],
      query_form: {
        id: '',
        attribute_id: '',
        language_id: '',
        name: "",
        sort: 1,
        status: 0,
        value: "",
      },
      searchQueryExport: {},
    })
    let query_form = reactive({
      page: 1,
      size: 50
    })
    //实例化请求
    let store = useStore()
    const request = new Request()
    const { proxy } = getCurrentInstance()
    // 生命周期
    onMounted(() => {
      data.language_id = store.state.user.language.id
      data.diySerach = [
        [
          { label: '属性名称', value: '', placeholder: '请输入属性名称', type: 'ipt', queryValue: 'name' },
          { label: '属性值名称', value: '', placeholder: '请输入属性值名称', type: 'ipt', queryValue: 'value' },
          { type: 'spec' },
          { type: 'spec' },
          { type: 'searchReset', url: 'v1/attr', otherValue: { name: '', language_id: data.language_id, page: query_form.page, size: query_form.size } }
        ]
      ]
      getList()
    })
    // 获取搜索、重置数据并更新
    const getSeachData = (value) => {
      data.list = value.data
      data.count = value.count
    }
    // 获取 搜索输入值
    const getChangeValue = (val) => {
      // console.log('获取输入数据 -->',val)
      // console.log('getChangeValue',val)
      data.searchQueryExport[val.queryValue] = val.value
    }
    // 点击重置
    const clearValue = () => {
      query_form.name = ''
      query_form.value = ''
      data.searchQueryExport.name = ''
      data.searchQueryExport.value = ''
    }
    // 获取语言值
    const getLanguageId = (value) => {
      data.childrenObj.languageId = value
      store.state.user.language.id = value
      data.attrIsShow = true
    }
    // 语言提示
    // const noticeShowBatch = (val) => {
    //   data.attrIsShow = true
    // }
    // 新增 -- 编辑 确定
    const attrSure = (value) => {
      // console.log('value ---> ',value)
      // data.attrIsShow = true
      data.childrenObj.addAttrObj = value
      let query = {
        language_id: data.childrenObj.languageId ? data.childrenObj.languageId : data.language_id,
        attribute_id: data.childrenObj.addAttrObj.attrValue,
        value: data.childrenObj.addAttrObj.attrName,
        value1: data.childrenObj.addAttrObj.attrNameEn,
        status: data.childrenObj.addAttrObj.attrState,
        id1: data.childrenObj.addAttrObj.id1 ? data.childrenObj.addAttrObj.id1 : '' 
      }
      let req = data.attrType == 'add' ? 'post' : 'put'
      let para = data.attrType == 'add' ? '' : '/' + data.attRow.id
      request[req]('v1/attr_value' + para, query).then(res => {
        if (res.status == 200) {
          ElMessage({
            type: 'success',
            message: res.message
          })
          getList()
        }
      })
    }
    // 获取例表
    const getList = () => {
      let query = {
        language_id: data.language_id,
        page: query_form.page,
        size: query_form.size,
        name: query_form.name,
        value: query_form.value
      }
      let assignQuery = Object.assign(query, data.searchQueryExport)
      request.get('v1/attr', assignQuery).then(res => {
        if (res.status == 200) {
          data.list = res.data.data
          data.count = res.data.count
        } else {
          ElMessage({
            type: 'error',
            message: res.message
          })
        }
      })
    }
    // 状态切换
    const handleSwitch = (row) => {
      let query = {
        id: row.attribute_value_id,
        language_id: store.state.user.language.id,
        status: row.status
      }
      proxy.$http.showLoading(false).post('v1/attr_value/change_status', query).then(res => {
        if (res.status == 200) {
          proxy.$message.success('状态修改成功')
        } else {
          console.log('失败', row)
          row.status == 1 ? row.status = 0 : row.status = 1
        }
      })

    }
    // 编辑
    const handleEdit = (row, type) => {
      if(type != 'edit'){
        data.attrIsShow = true
      }
      data.attrType = type
      if (type == 'edit') {
        console.log('row',row.attribute_value_id)
        proxy.$http.showLoading(false).get('v1/attr_value/'+ row.attribute_value_id).then(res => {
          if(res.status == 200){
            // console.log('res status ---> ',res)
            data.attRow = res.data
            data.attrIsShow = true
          }
        })
      } else {
        data.isShow = true
      }
    }
    // 条数
    const handleSizeChange = (size) => {
      query_form.size = size
      getList()
    }
    // 页码
    const handleCurrentChange = (page) => {
      query_form.page = page
      getList()
    }
    return {
      data,
      query_form,
      getList,
      getSeachData,
      handleSizeChange,
      handleCurrentChange,
      handleEdit,
      getLanguageId,
      // noticeShowBatch,
      attrSure,
      handleSwitch,
      getChangeValue,
      clearValue
    }
  }
}
</script>
<style scoped>
.title_box_prop{
  margin: 0px 22px 0px 22px!important;
}
::v-deep(.el-form-item__label) {
  text-align: left!important;
  padding-left: 22px!important;
}
</style>