<template>
  <div>
    <el-dialog
      title="商品改价"
      :visible.sync="ChangePricevisible"
      :before-close="close"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="同sku调整到相同价" name="1">
          <el-table
            v-if="activeName == '1'"
            border
            :height="height"
            :data="ChangePriceList"
            :cell-style="{ 'text-align': 'left' }"
            :header-cell-style="{
              'text-align': 'center',
              background: '#f9f9fa',
              color: '#606266',
            }"
          >
            <el-table-column width="380" label="商品信息">
              <template #default="{ row }">
                <div class="info">
                  <div class="img">
                    <img :src="row.product[0].img" alt="" />
                  </div>
                  <div>{{ row.sku }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="110" label="修改定价" prop="price">
              <template #default="{ row }">
                <div class="input">
                  <el-input
                    v-model="row.money"
                    placeholder="输入定价"
                    size="small"
                    style="width: 90px"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column width="110" label="商品数量">
              <template #default="{ row }">
                <div
                  style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 100%;
                  "
                >
                  {{ row.product.length }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="具体IMEI">
              <template #default="{ row }">
                <div
                  v-for="item in row.product"
                  :key="item.serial_number"
                  class="imeibox"
                >
                  <div class="imeilist">
                    <span>IMEI:{{ item.imei1 }}</span>
                    <span>质检员:{{ item.check_name }}</span>
                    <span>当前定价:{{ item.price / 100 }}</span>
                    <span>机器总成本:{{ item.total_cost }}</span>
                    <span
                      v-if="!row.money"
                      :class="
                        item.price / 100 - item.total_cost > 0 ? 'red' : 'green'
                      "
                    >
                      预估利润:{{
                        (item.price / 100 - item.total_cost).toFixed(2)
                      }}</span
                    >
                    <span
                      v-else
                      :class="row.money - item.total_cost > 0 ? 'red' : 'green'"
                    >
                      预估利润:{{
                        (row.money - item.total_cost).toFixed(2)
                      }}</span
                    >
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="所有IMEI统一调整固定金额" name="0">
          <el-row>
            <el-form ref="form" :model="form" :rules="rules">
              <el-col :span="8">
                <el-form-item prop="radio" label="调价方式">
                  <el-radio-group v-model="form.radio">
                    <el-radio :label="1">涨价</el-radio>
                    <el-radio :label="2">降价</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="调价值" prop="price">
                  <el-input
                    v-model="form.price"
                    size="small"
                    style="width: 160px"
                  />
                  <el-link
                    style="margin-left: 8px"
                    :underline="false"
                    type="primary"
                    @click="submitMoney('form')"
                    >确定</el-link
                  >
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
              <el-form-item label="半个小时内是否调过价">
                <el-select v-model="value" size="small" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col> -->
            </el-form>
          </el-row>
          <el-table
            v-if="activeName == '0'"
            border
            :height="height"
            :data="ChangePriceList"
            :cell-style="{ 'text-align': 'center' }"
            :header-cell-style="{
              'text-align': 'center',
              background: '#f9f9fa',
              color: '#606266',
            }"
          >
            <el-table-column width="380" label="商品信息">
              <template #default="{ row }">
                <div class="info">
                  <div class="img"><img :src="row.img" alt="" /></div>
                  <div>
                    {{ row.sku ? row.sku : row.title }} {{ row.use_trace }}
                    {{ row.use_desc }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="IMEI" prop="imei1" />

            <el-table-column label="商品定价">
              <template #default="{ row }">
                <div>当前定价：{{ row.price / 100 }}</div>
                <div
                  v-if="!row.money"
                  :class="
                    row.price / 100 - row.total_cost > 0 ? 'red' : 'green'
                  "
                >
                  预估利润：{{ (row.price / 100 - row.total_cost).toFixed(2) }}
                </div>
                <div
                  v-else
                  :class="row.money - row.total_cost > 0 ? 'red' : 'green'"
                >
                  预估利润：{{ (row.money - row.total_cost).toFixed(2) }}
                </div>
                <div class="input">
                  <el-input
                    v-model="row.money"
                    placeholder="输入定价"
                    size="small"
                    style="width: 90px"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column label="机器总成本">
              <template #default="{ row }">
                <div>
                  {{ row.total_cost }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="上次调价时间" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div style="margin-top: 20px; text-align: right">
        <el-button size="small" @click="close">取消</el-button>
        <el-button size="small" type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
    <!-- 改价结果 -->
    <el-dialog :visible.sync="successvisible"  :before-close="close" title="改价结果">
      <span v-if="errorList.length == 0">无改价失败机器</span>
      <span v-else
        >共有{{ errorList.length }}台机器改价失败，请检查错误原因</span
      >
      <el-table
        border
        :data="errorList"
        :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{
          'text-align': 'center',
          background: '#f9f9fa',
          color: '#606266',
        }"
      >
        <el-table-column label="质检码" prop="business_id" />
        <el-table-column label="商品码" prop="item_id" />
        <el-table-column label="错误信息" prop="msg" />
      </el-table>
      <div style="margin-top: 20px">
        <span style="color: green; margin-right: 9px"
          ><i class="el-icon-success" /> 共有{{
            successList.length
          }}台机器改价成功</span
        >
        <el-link type="primary" :underline="false" @click="successStatus = true"
          >查看更多</el-link
        >
      </div>
      <el-table
        v-if="successStatus"
        style="margin-top: 20px"
        border
        :height="successheight"
        :data="successList"
        :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{
          'text-align': 'center',
          background: '#f9f9fa',
          color: '#606266',
        }"
      >
        <el-table-column prop="business_id" label="质检码" />
        <el-table-column prop="item_id" label="商品码" />
        <el-table-column prop="msg" label="信息" />
      </el-table>
      <div style="margin-top: 20px; text-align: right">
        <el-button @click="close">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: [
    "ChangePricevisible",
    "successvisible",
    "ChangePriceList",
    "errorList",
    "successList",
  ],
  data() {
    return {
      activeName: "1",
      value: "",
      rules: {
        radio: [
          { required: true, message: "请选择调价方式", trigger: "change" },
        ],
        price: [
          { required: true, message: "请输入调价值", trigger: "blur" },
          { validator: this.validateAge, trigger: "blur" },
        ],
      },
      options: [
        {
          value: "0",
          label: "是",
        },
        {
          value: "1",
          label: "否",
        },
      ],
      form: {
        radio: "",
        price: "",
      },
      successStatus: false,
    };
  },
  components: {},
  computed: {
    height() {
      return document.documentElement.clientHeight - 500;
    },
    successheight(){
        return document.documentElement.clientHeight - 700;
    }
  },
  created() {},
  methods: {
    async handleClick(tab, event) {
      this.$emit("getPricelist", null, this.activeName);
    },

    close() {
      this.successStatus = false;
      this.$emit("ChangePriceclose");
    },
    submit() {
      const params = [];
      if (this.activeName == "1") {
        this.ChangePriceList.forEach((item) => {
          if (item.money) {
            item.product.forEach((el) => {
              params.push({
                xy_product_id: el.id,
                price: item.money * 100,
              });
            });
            this.$emit("submitprice", params);
          } else {
            this.$message.warning("请输入价格");
          }
        });
      } else {
        this.$refs["form"].validate(async (valid) => {
          if (!valid) return;
          this.ChangePriceList.forEach((item) => {
            params.push({
              xy_product_id: item.id,
              price: item.money * 100,
            });
          });
          this.$emit("submitprice", params);
        });
      }
    },
    submitMoney() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.ChangePriceList.forEach((item) => {
            if (this.form.radio === 1) {
              this.$set(
                item,
                "money",
                item.price / 100 + Number(this.form.price)
              );
            } else {
              this.$set(
                item,
                "money",
                item.price / 100 - Number(this.form.price)
              );
            }
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang='scss'>
::v-deep .el-dialog {
  width: 55% !important;
}
.info {
  display: flex;
  img {
    width: 100px;
  }
  div {
    text-align: left;
  }
}
::v-deep .input {
  text-align: center;

  .el-input__inner {
    border: none !important;
  }
}
.imeibox {
  display: flex;
  .imeilist {
    padding: 0 10px;
    span {
      margin-right: 10px;
    }
  }
}
@media screen and (max-width: 1920px) {
  ::v-deep .el-dialog {
    width: 70% !important;
  }
}
</style>