<template>
  <div style="padding: 20px">
    <div>
      <div class="header">
        <h3>账期设置</h3>
        <!-- <el-button type="primary" size="small" @click="editInfo">编辑</el-button> -->
      </div>

      <span style="color: orange"
        >*开通后用户可使用账期功能，先买后付,设置的天数期限内线上或线下进行付款,线下付款后，店铺需要在订单中确认已收货，否则将影响用户信用！</span
      >
    </div>

    <el-form ref="form" :rules="rules" :model="shopInfo" label-width="150px">
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="店铺是否开通账期"
            style="margin-top: 30px"
            prop="enablePaymentDays"
          >
            <el-switch
              v-model="shopInfo.enablePaymentDays"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="付款期限" prop="paymentDays" style="margin-top: 30px">
            <el-radio-group v-model="shopInfo.paymentDays">
              <el-radio :label="7">7天</el-radio>
              <el-radio :label="10">10天</el-radio>
              <el-radio :label="15">15天</el-radio>
            </el-radio-group>
            <p>用户需在确认收货后，规定天数内进行付款</p>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24">
          <el-form-item label="可使用账期商品" style="margin-top: 30px">
            <el-button
              type="primary"
              v-if="showButton"
              size="small"
              @click="selectProDuct"
              >选择商品</el-button
            >
          </el-form-item>
          <div style="margin-left: 30px" v-if="showButton">
            已选{{ multipleSelection.length }}件
            <el-button size="small" style="margin-left: 10px" @click="addRemove"
              >批量移除</el-button
            >
          </div>

          <el-table
            :data="tableData"
            style="width: 100%; margin-left: 30px"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="商品图片" align="center">
              <template slot-scope="scope">
                <el-image
                  style="width: 60px; height: 60px"
                  :src="scope.row.pic"
                  :preview-src-list="[scope.row.pic]"
                >
                </el-image>
              </template>
            </el-table-column>
            <el-table-column
              label="商品名称"
              align="center"
              prop="spuName"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="分类" align="center" prop="categoryName" />
            <el-table-column
              label="店铺所属分类"
              align="center"
              prop="merchantClassifyName"
            />
            <el-table-column label="价格" align="center" width="120">
              <template slot-scope="scope">
                {{ scope.row.lowestPrice.toFixed(2) }}/{{ scope.row.unit }}
              </template>
            </el-table-column>
            <el-table-column label="起批量" align="center">
              <template slot-scope="scope">
                {{ scope.row.lowestPurchase }}{{ scope.row.unit }}
              </template>
            </el-table-column>
            <el-table-column label="预计库存" align="center">
              <template slot-scope="scope">
                {{ scope.row.totalPredictStocks ? scope.row.totalPredictStocks : 0
                }}{{ scope.row.unit }}
              </template>
            </el-table-column>
            <el-table-column label="实际库存" align="center">
              <template slot-scope="scope">
                {{ scope.row.totalStocks }}{{ scope.row.unit }}
              </template>
            </el-table-column>
            <el-table-column label="实际销量" align="center" prop="salesVolume">
            </el-table-column>
            <el-table-column label="销售方式" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.spuType == 0">
                  {{
                    scope.row.saleModel == 1
                      ? "普通商品"
                      : scope.row.saleModel == 2
                      ? "采集预售"
                      : scope.row.saleModel == 3
                      ? "团批秒杀"
                      : scope.row.saleModel == 4
                      ? "清库专区"
                      : scope.row.saleModel == 5
                      ? "新店福利"
                      : ""
                  }}
                </span>
                <span v-else-if="scope.row.spuType == 1">
                  {{
                    scope.row.saleModel == 1
                      ? "普通商品"
                      : scope.row.saleModel == 2
                      ? "预售"
                      : scope.row.saleModel == 3
                      ? "团购秒杀"
                      : scope.row.saleModel == 4
                      ? "特价"
                      : scope.row.saleModel == 5
                      ? "新人福利"
                      : ""
                  }}
                </span>
                <span v-eles>
                  {{ scope.row.saleModel == 7 ? "返券商品" : "" }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="商品状态" align="center">
              <template slot-scope="scope">
                {{
                  scope.row.spuStatus == 2
                    ? "售罄"
                    : scope.row.spuStatus == 0
                    ? "上架"
                    : scope.row.spuStatus == 1
                    ? "下架"
                    : ""
                }}
              </template>
            </el-table-column>

            <el-table-column
              v-if="showButton"
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
              width="100"
            >
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="remove(scope.row)"
                  >移除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNo"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-col> -->
        <el-col :span="24" style="text-align: center; margin-top: 20px" >
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-col>
      </el-row>
    </el-form>
    <productDialog
      ref="productDialog"
      @productDialogInfo="productDialogInfo"
    ></productDialog>
  </div>
</template>

<script>
import { getGoodsListPage } from "@/api/manage/product";
import { getStoreInfo, modifyStoreInfo, setAccount } from "@/api/common/index";
import productDialog from "./components/periodProductDialog.vue";
export default {
  components: { productDialog },
  data() {
    return {
      showButton: true,
      form: {},
      rules: {
        enablePaymentDays: [
          { required: true, message: "请选择是否开启账期", trigger: "blur" },
        ],
        paymentDays: [{ required: true, message: "请选择付款期限", trigger: "blur" }],
        tableData: [{ required: true, message: "请选择可使用账期商品", trigger: "blur" }],
      },
      shopInfo: {
        enablePaymentDays: 0,
        enablePaymentDays: "",
      },
      tableData: [],
      total: 0,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        isSetAccount: 1,
      },
      multipleSelection: [],
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    addRemove() {
      if (this.multipleSelection.length < 1) {
        this.$message.error("请先选择要移除的商品！");
        return false;
      }
      let ids = [];
      this.multipleSelection.forEach((e) => {
        ids.push(e.id);
      });
      this.$confirm("是否移除已选商品,移除后, 该部分商品不可使用账期功能", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          setAccount({ ids: ids.toString(), isSetAccount: 0 }).then((res) => {
            if (res.code == 200) {
              this.$message.success("移除成功！");
              this.getInfo();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    remove(row) {
      this.$confirm("是否移除已选商品,移除后, 该部分商品不可使用账期功能", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          setAccount({ ids: row.id, isSetAccount: 0 }).then((res) => {
            if (res.code == 200) {
              this.$message.success("移除成功！");
              this.getInfo();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    productDialogInfo(list) {
      this.tableData = [...this.tableData, ...list];
      this.tableData = this.tableData.filter((item, index, self) => {
        return self.findIndex((t) => t.id === item.id) === index;
      });
    },
    selectProDuct() {
      this.$refs.productDialog.openDialog();
    },
    editInfo() {
      this.showButton = true;
    },
    cancel() {
      this.showButton = false;
    },
    submitForm() {
      // if (this.tableData.length < 1 && this.shopInfo.enablePaymentDays == 1) {
      //   this.$message.error("请选择可以使用账期的商品！");
      //   return;
      // }
      // let ids = [];
      // this.tableData.forEach((e) => {
      //   ids.push(e.id);
      // });
      this.$refs.form.validate((valid) => {
        if (valid) {
          modifyStoreInfo(this.shopInfo).then((res) => {
            if (res.code == 200) {
              // setAccount({ ids: ids.toString(), isSetAccount: 1 }).then((res) => {
              //   if (res.code == 200) {
                  this.$message.success("保存成功！");
                  this.getInfo();
                  this.showButton = false;
              //   }
              // });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getInfo() {
      getStoreInfo().then((res) => {
        if (res.code == 200) {
          this.shopInfo = res.data;
          // this.getList();
        }
      });
    },

    /** 查询参数列表 */
    getList() {
      this.loading = true;
      getGoodsListPage(this.queryParams).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.loading = false;
      });
    },
  },
};
</script>

<style scoped>
.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
</style>
