<!--
 * @Description: 新增/编辑弹框
 * @Author: Sugar.
 * @Date: 2023-11-24 13:55:00
 * @LastEditors: Sugar.
 * @LastEditTime: 2023-11-24 13:55:00
 * @FilePath: \cattle_webui\src\views\otaMr\dialog\dataEdit.vue
 * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
-->
<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="70vw"
    append-to-body
    :close-on-click-modal="false"
    @close="cancel"
  >
    <div class="dialog">
      <div>
        <el-form :model="form" ref="form" size="small" :rules="rules" :inline="true" label-width="100px">
          <el-form-item label="门店POIID" prop="poiId">
            <el-input
              v-model="form.poiId"
              placeholder="请输入门店POIID"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="商品类目ID" prop="categoryId">
            <el-select
              v-model="form.categoryId"
              placeholder="商品类目ID"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in dict.type.tiktok_category"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <el-table 
      row-key="tableId"
      ref="tables" 
      v-loading="loading" 
      :data="goodsList" 
      border 
      @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
        <el-table-column label="座位类型" align="center" prop="priceName" />
        <el-table-column label="销售价" align="center" prop="actualAmount" width="250">
          <template slot-scope="scope">
            <span v-if="!isCheck(scope.row)">{{ scope.row.actualAmount }}</span>
            <el-input-number v-else v-model="scope.row.actualAmount" controls-position="right"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="结算价" align="center" prop="originAmount" width="250">
          <template slot-scope="scope">
            <span v-if="!isCheck(scope.row)">{{ scope.row.originAmount }}</span>
            <el-input-number v-else v-model="scope.row.originAmount" controls-position="right"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="开始时间" align="center" prop="timeStart" />
        <el-table-column label="结束时间" align="center" prop="timeEnd" />
        <el-table-column label="抖音排期状态" align="center" prop="status">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.tiktok_scheduling_status" :value="scope.row.status"/>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button  @click="cancel">取消</el-button>
      <el-button
        type="primary"
        @click="submitForm"
        v-loading.fullscreen.lock="loading"
        element-loading-text="提交中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <span v-if="loading">提交中...</span>
        <span v-else>推送已选</span>
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import { pushById } from "@/api/otaMr/tiktok";
export default {
  name: "dataEdit",
  dicts: ['tiktok_category','tiktok_scheduling_status'],
  data() {
    return {
      title: "编辑",
      model: "EDIT",
      open: false,
      loading: false,
      goodsList: [],
      form: {},
      rules: {
        poiId: [{ required: true, message: "请输入门店POIID", trigger: ["change","blur"] }],
        categoryId: [{ required: true, message: "请选择商品类目ID", trigger: ["change","blur"] }],
      },
      multipleSelection: []
    };
  },
  methods: {
    /**
     * 打开弹框
     * @date 2023-11-22
     * @param {any} obj
     * @returns {any}
     */
    openDialog(title, obj, type) {
      this.open = true;
      this.multipleSelection = []
      this.form = JSON.parse(JSON.stringify(obj))
      
      let list = []
      obj.sku.forEach((item,index)=>{
        list.push({
          ...item,
          tableId: "id_" + index
        })
      })
      this.goodsList = JSON.parse(JSON.stringify(list))
      this.$nextTick(()=>{
        this.goodsList.forEach((item)=>{
          if(item.checkFlag == 1) {
            this.$refs.tables.toggleRowSelection(item,true)
          }
        })
        this.$refs["form"].clearValidate()
      })
    },
    /**
     * 保存
     * @date 2023-11-22
     * @returns {any}
     */
    submitForm() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          try {
            if(!this.multipleSelection && this.multipleSelection.length <= 0) {
              this.$message.error("请选择上推送的数据!!!");
              return
            } 
            let flog = false
            let list = []
            this.multipleSelection.forEach((item)=>{
              list.push({
                ...item,
                checkFlag: 1
              })
              if((!item.actualAmount && item.actualAmount !=0) || (!item.originAmount && item.originAmount !=0)) {
                flog = true
              } 
            })
            if(flog) {
              this.$message.error("请输入销售价和结算价!!!");
              return
            }
            this.loading = true;
            const { code } = await pushById({ 
              ...this.form,
              sku: list
            });
            if (code === 200) {
              this.$message.success("操作成功!");
              this.$emit("getList");
              this.cancel();
            }
          } catch (error) {
            console.error("error====",error)
          } finally {
            this.loading = false;
          }
        }else {

        }
      })
    },
    /**
     * 重置
     * @date 2023-11-22
     * @returns {any}
     */
    reset() {
      this.$refs["form"].clearValidate()
    },
    /**
     * 关闭弹框
     * @date 2023-11-22
     * @returns {any}
     */
    cancel() {
      this.reset();
      this.open = false;
    },
    isCheck(row){
      let flog = false
      this.multipleSelection.forEach((item,index)=>{
        if(item.tableId == row.tableId) {
          flog = true
        }
      })
      return flog
    },
    handleSelectionChange(val) {
      console.log("选中了====", val)
      this.multipleSelection = val;
    }
  },
};
</script>

<style lang="scss" scoped>
.dialog {
  padding: 0 30px;
  max-height: 65vh;
  overflow-y: auto;
}
.dialog {
  padding: 0 30px;
  .upload-btn {
    width: 100px;
    height: 100px;
    background-color: #fbfdff;
    border: dashed 1px #c0ccda;
    border-radius: 5px;
    i {
      font-size: 30px;
      margin-top: 20px;
    }
    &-text {
      margin-top: -10px;
    }
  }
  .avatar {
    cursor: pointer;
  }
}
</style>
