<!--
  @description: 参数设置列表弹框
  @Modifier：dijia
  @routerPath:
  @date：  2021/6/29
-->
<template>
  <div>
    <el-dialog
      v-dialogDrag
      :visible.sync="dialog"
      title="参数设置"
      width="80%"
      :close-on-click-modal="false"
      custom-class="shop_mall_dialog"
    >
      <div class="shopmall-page-title">
        参数设置
      </div>
      <div class="search-content clearfix">
        <section class="fl">
          <el-form ref="paramForm" :model="initDataParams" :inline="true">
            <el-form-item label="参数名称" prop="paramName">
              <el-input v-model.trim="initDataParams.paramName" placeholder="请输入参数名称" />
            </el-form-item>
            <el-form-item label="状态" prop="useStatus">
              <el-select v-model="initDataParams.useStatus" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="参数类型" prop="paramType">
              <el-select v-model="initDataParams.paramType" placeholder="请选择">
                <el-option
                  v-for="item in paramOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </section>
        <div class="fr">
          <el-button type="purple" @click.native="onSearch">
            搜索
          </el-button>
          <el-button type="gray" @click.native="resetList">
            重置
          </el-button>
        </div>
      </div>
      <div class="shopmall-page-add">
        <el-button type="purple" @click="addInstitutions">
          新 增
        </el-button>
        <!-- 快速添加参数 默认 主要参数 启用 -->
        <span :class="{'quickly-add-title': true, 'dis_none': quicklyFlag }" @click="quicklyFlag = true">快速添加参数...</span>
        <div :class="{'dis_none': !quicklyFlag,'quickly-box': true }">
          <el-input ref="quicklyFocus" v-model="quicklyName" class="quickly-add-input" placeholder="输入参数名称..." />
          <div class="quickly-add-submit quickly-add" @click="quicklySubmit">
            保存
          </div>
          <div class="quickly-add-cancel quickly-add" @click="quicklyFlag = false">
            取消
          </div>
        </div>
      </div>
      <div class="shopmall-view">
        <el-table
          ref="multipleTable"
          :data="tableData"
          :row-key="getRowKeys"
          size="small"
          :border="false"
          :stripe="false"
        >
          <el-table-column align="center" label="序号" width="55" type="index" />
          <el-table-column label="参数名称">
            <template slot-scope="scope">
              <span>{{ scope.row.paramName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="参数编码">
            <template slot-scope="scope">
              <span>{{ scope.row.paramCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="分类名称" align="center">
            <span>{{ goodsClassName }}</span>
          </el-table-column>
          <el-table-column align="center" label="参数类型">
            <template slot-scope="scope">
              <span>{{ scope.row.paramType === '00' ? '主要参数' : '普通参数' }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.useStatus==='01'" style="color:#00AACA">启用</span>
              <span v-if="scope.row.useStatus==='02'" style="color:#F77C46">禁用</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="340"
            align="center"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="editGoodsClassBtn(scope.row.id)">
                [编辑]
              </el-link>
              <el-link type="primary" @click="setEnablingClickBtn(scope.row)">
                <span v-if="scope.row.useStatus==='01'" style="color:#F77C46">[禁用]</span>
                <span v-if="scope.row.useStatus==='02'">[启用]</span>
              </el-link>
              <el-link type="primary" @click="deleteGoodsClassBtn(scope.row.id)">
                [删除]
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页组件-->
      <pagination :pagination-data="paginationData" shopmall-pagination="shopmall-pagination" @change="getData" />
      <!-- // 新增/编辑参数 -->
      <goods-class-add v-if="childenData.dialog" :childen-data="childenData" @repload="repload" />
    </el-dialog>
  </div>
</template>

<script>
// api
import { deleteGoodsClassParam, paramOnOrOff, getParamPageList, getGoodsClassParam, addParamInfo } from '@/api/shoppingmall/products'
// 组件
import GoodsClassAdd from './goodsParamManage-dialog'
import pagination from '@comp/common/pagination/pagination'// 分页
/* 公用方法*/
import { filterObj } from '@/assets/js/utils'// 常用方法
export default {
  name: 'GoodsClassList',
  components: {
    GoodsClassAdd: GoodsClassAdd,
    pagination
  },
  data() {
    return {
      quicklyFlag: false,
      dialog: false, // 弹框打开状态
      queryId: '', // 查询参数的分类id
      goodsClassName: '', // 查询参数的分类名称
      goodsClassCode: '', // 查询参数的分类编码
      childenData: {
        dialog: false, // 弹框
        code: 'add' // add 新增 edit 编辑
      },
      // rowKey
      getRowKeys(row) {
        return row.id
      },
      // table数据
      tableData: [],
      initDataParams: {
        goodsClassId: '',
        useStatus: '',
        paramName: '',
        paramType: ''
      },
      // select使用状态数组 01 启用 02 禁用
      options: [
        {
          value: '00',
          label: '请选择',
          disabled: true
        },
        {
          value: '01',
          label: '启用'
        },
        {
          value: '02',
          label: '禁用'
        }
      ],
      // select参数类型数组 00 主要参数 01 普通参数
      paramOptions: [
        {
          value: '02',
          label: '请选择',
          disabled: true
        },
        {
          value: '00',
          label: '主要参数'
        },
        {
          value: '01',
          label: '普通参数'
        }
      ],
      // 分页数据
      paginationData: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      quicklyName: null
    }
  },
  watch: {
    // ID变化时，重新获取列表数据
    'queryId'() {
      this.getData()
    },
    // 快速添加时，聚焦到输入框
    'quicklyFlag'(val) {
      if (val) {
        this.quicklyName = null
        this.$nextTick(() => {
          this.$refs['quicklyFocus'].$el.querySelector('input').focus()
        })
      }
    },
    // 关闭弹框时重置
    'dialog'(val) {
      if (!val) {
        this.$refs.paramForm.resetFields()
        this.quicklyFlag = false
      }
    }
  },
  methods: {
    // 打开弹框
    open(data) {
      this.dialog = true
      // 分类ID
      this.queryId = data.id
      // 分类名称
      this.goodsClassName = data.classifyName
      // 分类编码
      this.goodsClassCode = data.classifyNo
    },
    // 搜索
    onSearch() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      // 获取列表信息
      this.getData()
    },
    // 重置
    resetList() {
      this.$refs.paramForm.resetFields()
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      // 获取列表信息
      this.getData()
    },
    // 加载数据
    getData() {
      const params = this.getQueryParams()// 查询条件
      getParamPageList(params).then(res => {
        if (res.header.ret === '0') {
          this.tableData = res.data.records
          this.paginationData.total = res.data.total
        }
      }).catch((err) => {
        throw new Error('获取商品参数列表失败' + err)
      })
    },
    // 查询条件
    getQueryParams() {
      this.initDataParams.goodsClassId = this.queryId
      const param = Object.assign({}, this.initDataParams)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      return filterObj(param)
    },
    /**
     * 删除商品
     */
    deleteGoodsClassBtn(id) {
      this.$confirm('确认要删除本条记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        deleteGoodsClassParam(id).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getData()
        })
      })
    },
    /**
     * 新增
     */
    addInstitutions() {
      this.childenData = {
        dialog: true,
        id: this.queryId,
        code: 'add',
        detail: '',
        goodsClassName: this.goodsClassName,
        goodsClassCode: this.goodsClassCode
      }
    },
    /**
     * 编辑商品
     */
    editGoodsClassBtn(id) {
      getGoodsClassParam(id).then(res => {
        if (res.header.ret === '0') {
          this.childenData = {
            code: 'edit',
            dialog: true,
            detail: res.data,
            goodsClassName: this.goodsClassName,
            goodsClassCode: this.goodsClassCode
          }
        }
      })
    },
    /**
     * 禁用and启用
     */
    setEnablingClickBtn(item) {
      const useStatus = item.useStatus === '01' ? '02' : '01'
      this.$confirm('确认要修改参数状态吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        paramOnOrOff(item.id, useStatus).then((res) => {
          if (res.header.ret === '0') {
            this.getData()
            this.$message({
              message: ' 修改状态成功！',
              type: 'success'
            })
          }
        })
      })
    },
    // 新增/编辑后 刷新列表
    repload() {
      this.paginationData.pageNo = 1
      this.getData()
    },
    quicklySubmit() {
      if (!this.quicklyName.trim()) {
        this.$message.info('参数名称不能为空')
        return
      }
      const params = {
        paramName: this.quicklyName,
        goodsClassId: this.queryId,
        goodsClassName: this.goodsClassName,
        goodsClassCode: this.goodsClassCode,
        paramType: '00',
        useStatus: '01'
      }
      addParamInfo(params).then((res) => {
        if (res.header.ret === '0') {
          this.$message({
            message: '新增参数成功',
            type: 'success'
          })
          this.getData()
          this.quicklyFlag = false
        }
      }).catch((err) => {
        throw new Error('新增参数失败' + err)
      })
    }
  }
}
</script>

<style scoped lang="less">
.quickly-add-title {
  cursor: pointer;
  margin-left: 20px;
  display: block;
  flex: 1;
  height: 32px !important;
  line-height: 32px !important;
  &:hover {
    color: #5d9bfc;
  }
}
.quickly-box {
  margin-left: 20px;
  display: flex;
  .quickly-add {
    margin-left: 10px;
    height: 32px !important;
    line-height: 32px !important;
    text-align: center;
    cursor: pointer;
    width: 70px;
  }
  .quickly-add-submit {
    color: #fff;
    border: 1px solid #00AACA;
    background-color: #00AACA;
    padding: 0 5px;
    border-radius: 3px;
    transition: .1s;
  }
  .quickly-add-cancel {
    color: #182b50;
    &:hover {
      color: #5d9bfc;
    }
  }
  .quickly-add-input {
    width: 460px;
  }
}
.shopmall-page-add {
  width: 100%;
  margin-top:  12px;
  padding: 0 24px 0 12px;
  display: flex;
  align-items: center;
}
.dis_none {
  display: none;
}
</style>
