<template>
  <el-dialog 
    :title="title"
    :visible.sync="showFlag" 
    width="1000px" 
    append-to-body
    >
			<el-form ref="form1" label-width="80px">
				<el-form-item label="目标id" prop="belongGoalId">
					<el-input v-model="belongGoalId" disabled />
				</el-form-item>
			</el-form>
			<el-tabs type="border-card" v-if="belongGoalId != null">
				<el-tab-pane :label="title">
          <div>
            <div class="query">
              <el-input
                style="width: 351px; margin-bottom: 10px"
                v-model="leftQueryParams.supplierName"
                placeholder="请输入内容"
                clearable
                @keyup.enter.native="handleQuery"
              />
              <el-input
                style="width: 351px; margin-bottom: 10px"
                v-model="rightQueryParams.supplierName"
                placeholder="请输入内容"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </div>
            <el-transfer
              v-model="rightList"
              :data="leftList"
              :titles="titles"
              :filterable="true"
              @change="handleChange"
            >
              <!-- 左侧栏分页 -->
              <el-button
                type="text"
                style="color: #606266"
                v-if="leftLength != 0"
                class="transfer-footer"
                slot="left-footer"
                size="small"
                >共{{ Ltotal }}条</el-button
              >
              <el-button
                v-if="leftLength != 0"
                class="transfer-footer"
                slot="left-footer"
                size="small"
                @click="leftPageNumChange"
                :disabled="LPageNum - 1 < 1"
                >上一页</el-button
              >
              <el-input
                v-if="leftLength != 0"
                v-model="LPageNum"
                size="mini"
                class="transfer-footer"
                slot="left-footer"
                :placeholder="LPageNum"
                style="width: 67px; padding: 1px 3px"
                disabled
              ></el-input>
              <el-button
                class="transfer-footer"
                slot="left-footer"
                size="small"
                @click="leftAddPageNumChange"
                v-if="leftLength != 0"
                :disabled="LNextPage > LPages"
                >下一页</el-button
              >

              <!-- 右侧栏分页 -->
              <el-button
                type="text"
                style="color: #606266"
                v-if="rightLength != 0"
                class="transfer-footer"
                slot="right-footer"
                size="small"
                >共{{ Rtotal }}条</el-button
              >
              <el-button
                v-if="rightLength != 0"
                class="transfer-footer"
                slot="right-footer"
                size="small"
                @click="rightPageNumChange"
                :disabled="RPageNum - 1 < 1"
                >上一页</el-button
              >
              <el-input
                v-if="rightLength != 0"
                v-model="RPageNum"
                size="mini"
                class="transfer-footer"
                slot="right-footer"
                :placeholder="RPageNum"
                style="width: 43px"
              ></el-input>
              <el-button
                class="transfer-footer"
                slot="right-footer"
                size="small"
                @click="rightAddPageNumChange"
                v-if="rightLength != 0"
                :disabled="RNextPage > RPages"
                >下一页</el-button
              >
            </el-transfer>
          </div>
        </el-tab-pane>
			</el-tabs>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
</template>

<script>
import { getLeftList, getRightList, addSupplier, getProductLeftList, getProductRightList } from "@/api/quality/qcGoalDistribute";

export default {
  name: "QcGoalDistriBute",

  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      model: null,
      // 是否显示弹出层
      showFlag: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        supplierCode: null,
        supplierName: null,
        belongGoalId: null,
        itemId: null,
        itemCode: null,
        specification: null,
        unitOfMeasure: null,
        quantity: null,
        productionTime: null,
        timeUnitType: null,
      },
      // 表单参数
      form: {},
      // 分页
      page: { pageNo: 1, pageSize: 20, total: 0 },

      //--------------------->
      leftList: [],
      rightList: [],
      titles: ["未分配", "已分配"],
      // 左侧分页数据
      Ltotal: "",
      LPageNum: "1",
      LPageSize: "20",
      LNextPage: null,
      LPages: null,
      leftLength: null,
      leftQueryParams: {
        supplierName: null,
        belongGoalId: null,
        pageNum: 1,
        pageSize: 20,
      },
      // 右侧分页数据
      Rtotal: "",
      RPageNum: "1",
      RPageSize: "20",
      RPages: null,
      rightLength: null,
      RNextPage: null,
      rightQueryParams: {
        supplierName: null,
        belongGoalId: null,
        pageNum: 1,
        pageSize: 20,
      },
    };
  },
  props: {
    belongGoalId:undefined,

  },
  created() {
    
  },
  methods: {
    // // 穿梭框搜索
    // filterMethod(keyword, row) {
    //   console.log(keyword, row);
    //   return row.label.indexOf(keyword) > -1;
    // },
    // 查询
    handleQuery() {
      this.getList();
      this.getRightListFun();
    },
    /** 查询未分配产品列表 */
    getList() {
      this.loading = true;
      this.leftQueryParams.belongGoalId = this.belongGoalId;
      if(this.model) {
        getLeftList(this.leftQueryParams).then((response) => {
          this.LPages = Math.ceil(response.total / this.LPageSize);
          this.leftList = response.rows;
          this.Ltotal = response.total;
          this.LPageNum = this.leftQueryParams.pageNum;
          this.LNextPage = this.leftQueryParams.pageNum + 1;
          this.loading = false;
        });
      }else{
        getProductLeftList(this.leftQueryParams).then((response) => {
          this.LPages = Math.ceil(response.total / this.LPageSize);
          this.leftList = response.rows;
          this.Ltotal = response.total;
          this.LPageNum = this.leftQueryParams.pageNum;
          this.LNextPage = this.leftQueryParams.pageNum + 1;
          this.loading = false;
        });
      }
      
    },
    /**左边上一页**/
    leftPageNumChange() {
      this.leftQueryParams.pageNum = this.LPageNum - 1;
      this.loading = true;
      this.getList();
      this.getRightListFun();
    },
    /**左边下一页**/
    leftAddPageNumChange() {
      this.leftQueryParams.pageNum = this.LNextPage;
      this.loading = true;
      this.getList();
      this.getRightListFun();
    },

    /** 查询已分配产品列表 -------------------------------*/
    getRightListFun() {
      this.loading = true;
      this.rightQueryParams.belongGoalId = this.belongGoalId;
      if(this.model) {
        getRightList(this.rightQueryParams).then((response) => {
          this.RPages = Math.ceil(response.total / this.RPageSize);
          let dataright = [];
          for (let i in response.rows) {
            // 将返回的列表赋值于穿梭框左边列表
            dataright.push(response.rows[i].key);
          }
          this.rightList = dataright;
          this.Rtotal = response.total;
          this.RPageNum = this.rightQueryParams.pageNum;
          this.RNextPage = this.rightQueryParams.pageNum + 1;
          this.loading = false;
        });
      }else{
        getProductRightList(this.rightQueryParams).then((response) => {
          this.RPages = Math.ceil(response.total / this.RPageSize);
          let dataright = [];
          for (let i in response.rows) {
            // 将返回的列表赋值于穿梭框左边列表
            dataright.push(response.rows[i].key);
          }
          this.rightList = dataright;
          this.Rtotal = response.total;
          this.RPageNum = this.rightQueryParams.pageNum;
          this.RNextPage = this.rightQueryParams.pageNum + 1;
          this.loading = false;
        });
      }
      
    },
    /**右边上一页**/
    rightPageNumChange() {
      this.rightQueryParams.pageNum = this.RPageNum - 1;
      this.loading = true;
      this.getRightListFun();
    },
    /**右边下一页**/
    rightAddPageNumChange() {
      this.rightQueryParams.pageNum = this.RNextPage;
      this.loading = true;
      this.getRightListFun();
    },

    // 取消按钮
    cancel() {
      this.showFlag = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        recordId: null,
        supplierCode: this.supplierCode,
        supplierName: this.supplierName,
        itemId: null,
        itemCode: null,
        materialName: null,
        specification: null,
        unitOfMeasure: null,
        quantity: null,
        productionTime: null,
        timeUnitType: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
    },

    /** 动态分配 */
    handleChange(value, direction, movedKeys) {
      this.queryParams.belongGoalId = this.belongGoalId;
      this.queryParams.selectedValues = value;
      console.log(this.queryParams.selectedValues);
      console.log(value);
      addSupplier(this.queryParams).then((response) => {
        if(response.code == 200){
          this.$modal.msgSuccess("关联成功");
        }else{
          this.$modal.msgError("关联失败");
        }
        
      });
    },
    /** 提交 */
    submitForm() {
			this.showFlag = false;
			this.getList();
		},
  },
};
</script>
<style>
.el-transfer-panel {
  width: 350px;
}
.query{
  display: flex;
  justify-content: space-between;
}
.el-transfer{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-transfer-panel__body {
  height: 300px;
}
.el-transfer-panel__list.is-filterable {
    height: 210px;
    padding-top: 0;
}
</style>
