<template>

  <el-dialog  title="PN" :visible.sync="visible" append-to-body  width="1000px"
      :close-on-click-modal="false" custom-class="common-dialog over-dialog">
    <div class="item-search">
      <div class="input-div"  style="width: 80%">
        <el-input size="small"  v-model="queryParam.longsysPn" v-inputFilter:trim
          @keyup.enter.native="isExistsPn"   placeholder="请输入产品PN" />
        <el-select size="small" v-model="queryParam.itemLevel"
            placeholder="请选择产品等级"  clearable filterable >
         <el-option
                v-for="item in itemLevelList"
                :key="item.productAttributeId"
                :label="item.productAttributeValue"
                :value="item.productAttributeValue" >
         </el-option>
        </el-select>
        <el-select size="small" v-model="queryParam.projectCategory" placeholder="请选择产品类别"
              @change="setProjectCategory"     clearable filterable >
         <el-option
                v-for="item in projectCategoryList"
                :key="item.ITEM_CATEGORY_TYPE"
                :label="item.ITEM_CATEGORY_TYPE"
                :value="item.ITEM_CATEGORY_TYPE" >
         </el-option>
        </el-select>
        <el-select size="small" v-model="queryParam.itemModel" placeholder="请选择容量"
                   clearable filterable >
          <el-option
                 v-for="item in itemCapacityList"
                 :key="item.ITEM_CAPACITY"
                 :label="item.ITEM_CAPACITY"
                 :value="item.ITEM_CAPACITY" >
          </el-option>
        </el-select>
      </div>
      <div>
        <el-button type="primary" @click="isExistsPn" size="mini">查询</el-button>
        <el-button type="warning" @click="handleSure" size="mini">确认</el-button>
      </div>
    </div>

      <el-table :data="tableData" @row-dblclick="rowDblclick" border  height="100%"
        highlight-current-row size="mini" stripe >

        <el-table-column label="选择" width="60" >
          <template slot-scope="scope">
            <el-radio v-model="rowVal" :label="scope.row">&nbsp;</el-radio>
          </template>
        </el-table-column>

        <el-table-column
          v-for="(item,index) in columns"
          :key="index"
          :prop="item.prop"
          :min-width="item.width"
          :label="item.label"
          :fixed="item.fixed"
          :formatter="item.format">
        </el-table-column>
      </el-table>
      <!-- 分页-->
      <ls-pagination :pager.sync="pager"  @query="queryPn"></ls-pagination>

  </el-dialog>
</template>

<script>
import commonSelect from '@/common/commonSelectList.js'
export default {
    name: 'dialog-pn',
    props: {

    },
    created(){
      this.getSelectList();
      // this.queryPn();
    },
    methods: {
        async getSelectList(){
          commonSelect.initItemCategoryType(this, '', (data)=>{
              this.projectCategoryList = data;
          });
          commonSelect.initproductAttributeGet(this, '产品等级', (data)=>{debugger
              this.itemLevelList = data;
          })
          this.getItemCapacity();
          this.brandList=await commonSelect.initDictDataGet(this,"Crm_Plan_Import_Brand");
        },
        //获取存储容量
        getItemCapacity(categoryType){
          commonSelect.initItemCapacity(this, {categoryType }, (data)=>{
            this.itemCapacityList = data;
          });
        },
        setProjectCategory(val){
          if( val){
            this.queryParam.itemModel = '';
            this.getItemCapacity(val);
          }
        },
        queryPn (cur) {
            if(typeof cur !== 'undefined'){
              this.pager.curPage = cur;
            }
            let param = {
              busSystem: 'cloud-crm-project',
              currPage: this.pager.curPage,
              pageSize: this.pager.size,
              itemStatusList: ['Active','NPI','MKT'],
              organizationId: 85
            }
            Object.assign(param, this.queryParam);
            this.$ajax.post({
                domain: 'dataQueryUrl',
                url: 'inv.getLongsysPnItems',
                data: param,
                requestType: 'body',
                showLoad: true,
                success: function (res) {
                    if (res.errorCode === 200) {
                        this.pager.totals = res.data.total  || 0;
                        this.tableData = res.data.list || [];
                    }
                }.bind(this),
                error: function (res) {
                   this.$message({
                     type: 'error',
                     message: res.body.msg || res.msg
                   })
                }.bind(this)
            })
        },
        //pn 输入框 失去焦点时判断 pn  是否已经存在
        isExistsPn(){

            let valid = Object.values(this.queryParam).every( item => item==='');
            if(valid){
              this.$message({message: '请输入查询条件'});
              return;
            }
            // let param = {
            //   busSystem: 'cloud-crm-project',
            //   productAttributeName: '产品P/N',
            //   productAttributeValue: this.queryParam.longsysPn,
            // }
            this.queryPn(1);
            // this.$ajax.get({
            //     domain: 'dataQueryUrl',
            //     url: 'inv.productAttributeJudge',
            //     data: param,
            //     requestType: 'body',
            //     showLoad: true,
            //     success: function (res) {
            //         if (res.errorCode === 200 ) {
            //           if(res.data === 'N') {
            //             //this.$message({type: 'warning', message: 'pn不存在!'});
            //           } else {
            //             this.queryPn(1);
            //           }
            //         }
            //     }.bind(this),
            //     error: function (res) {
            //       this.$message({
            //         type: 'error',
            //         message: res.body.msg || res.msg
            //       })
            //     }.bind(this)
            // })
        },
        // 双击选中行
        rowDblclick (row, column, event) {
              this.rowVal = row;
              this.$emit('setPnValue', this.rowVal, this.pnIndex);
              this.visible = false;
        },
        handleSure(){
          if(!this.rowVal){
            this.$message('请先选择数据！');
            return;
          }
          debugger;
          this.$emit('setPnValue', this.rowVal, this.pnIndex);
          this.visible = false;
        },

    },
    data () {
        return {
            visible: false,
            brandList:[],
            itemCapacityList:[],
            projectCategoryList:[],
            itemLevelList: [], //产品等级
            rowVal: '',
            pnIndex: '', //标识哪行 pn 打开弹窗
           // 格字段
            columns: [
               {label: '标准PN', prop: 'longsysPn', width: '120', fixed: false},
               {label: '容量', prop: 'itemModel', width: '110', fixed: false},
               {label: '产品类别', prop: 'projectCategory', width: '100', fixed: false},
               {label: '产品线', prop: 'itemProductLine', width: '100', fixed: false},
               {label: '品牌', prop: 'itemBrand', width: '100', fixed: false},
               {label: '等级', prop: 'itemLevel', width: '100', fixed: false}
            ],
            tableData: [],
            queryParam: {
              longsysPn: "",
              projectCategory:"",
              itemLevel: "",
              itemModel:""
            },
            //分页参数
            pager: {
              curPage: 1,
              size: 10,
              pageOptions: [10, 20, 30],
              totals: 0
            },

        }
    },

}
</script>

<style type="text/css"  lang="scss">
  .el-dialog {
    .item-search {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      .input-div{
        // flex: 1;
        display: flex;
        .el-input, .el-select{
          margin-right: 10px;
        }
      }
    }

  }

</style>
