<template>
  <div class="modifyPriceIdx">
    <s-header :name="$t('device.modifyPricePage.title')" :noback="false"></s-header>
    <div class="headerCon kBordBott o-plr-10 o-ptb-16 l-flex-RC">
      <div class="line o-mr-6"></div>
      <div>
        <span class="c-color c-text-14">{{ $t('device.modifyPricePage.equipmentName') }}：</span>
        <span class="c-text-color c-text-14">{{ equipmentName }}</span>
      </div>
    </div>
    <div class="content o-plr-10 o-ptb-16">
      <div class="l-flex-between o-mb-10">
        <div>{{ $t('device.modifyPricePage.total') }}{{ tableData.length }}{{ $t('device.modifyPricePage.goods') }}
        </div>
        <div class="l-flex-RC" @click="noticeClk">
          <span>{{ $t('device.modifyPricePage.batchModify') }}</span>
          <div class="gotoRight"></div>
        </div>
      </div>
      <div v-for="(item, index) in tableData" :key="index" class="l-flex-between goodsCon kBordBott o-pb-10">
        <div class="l-flex-RC">
          <img class="goodsImg" :src="showSugerPhoto(item)" />
          <span class="o-ml-6">{{ item.productName }}</span>
        </div>
        <div class="l-flex-RC">
          <div v-if="item.isEdit" class="priceInp">
            <van-field type="number" label-width="0" :border="false" v-model="item.rmbPrice" clearable label=" " />
          </div>
          <div v-else class="c-text-15" style="color: #df5e4c">
            <!-- 商品价格调整￥ -->
            <!-- <span>￥</span> -->
            <span>{{ currencySymbol }}</span>
            <span>{{ item.rmbPrice }}</span>
          </div>
          <div v-if="!item.isEdit" @click="editClk(item, 1)" class="l-flex-RC o-ml-20">
            <!-- <img class="editIcon" src="../../../assets/device/editIcon.png" alt="" /> -->
            <div class="editIcon"></div>
            <span class="editBtn c-text-14">{{ $t('device.modifyPricePage.modify') }}</span>
            <!-- 74af08 -->
          </div>
          <div v-else @click="editClk(item, 2)" class="l-flex-RC o-ml-20">
            <!-- <img class="editIcon" src="../../../assets/device/subIcon.png" alt="" /> -->
            <div class="editIcon"></div>
            <span class="editBtn c-text-14">{{ $t('device.modifyPricePage.submit') }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 批量修改弹窗 -->
    <kDialog :isCloseForConfirm="false" :dialogTitle="$t('device.modifyPricePage.batchPrice')"
      :confirmBtnTxt="$t('device.modifyPricePage.modifySubmit')" ref="kDialogRef" @confirmclk="confirmClk">
      <template #content>
        <div class="cust_vantBorder">
          <van-field type="number" clearable v-model="cofficentForm.price"
            :placeholder="$t('device.modifyPricePage.batchPricePlace')" :label="$t('device.modifyPricePage.batchPrice')">
          </van-field>
        </div>
      </template>
    </kDialog>
  </div>
</template>

<script>
import kDialog from "@/components/commom/kDialog/index.vue";
// 导入接口
import { selectProducts, Api_getUpdaProdPrice } from '@/service/device/index';
import sHeader from "@/components/SimpleHeader";
import { reactive, ref } from "@vue/reactivity";
import { onMounted } from '@vue/runtime-core';
import { useRoute } from 'vue-router';
import { showToast } from 'vant';
import { useI18n } from "vue-i18n";
import { styleUrl } from "../../../common/js/utils";
export default {
  components: { sHeader, kDialog },
  setup() {
    // 引入语言
    const { t } = useI18n();
    // 批量修改弹窗
    const kDialogRef = ref(null);
    // 点击批量修改
    const noticeClk = () => {
      cofficentForm.price = '';
      kDialogRef.value.openDialog();
    };
    // 点击确定按钮
    const confirmClk = () => {
      if (!cofficentForm.price) {
        showToast(t('device.modifyPricePage.batchPricePlace'));
        return;
      }
      cofficentForm.no = '';
      cofficentForm.type = 1;
      updatePrice();
      kDialogRef.value.closeDialog();
    }
    // 商品图片路径处理
    const showSugerPhoto = (row) => {
      let imgId = row.no;
      if (imgId) {
        return require(`../../../assets/order/spunSugar/goods/${imgId}.png`);
      }
      return imgId;
    };
    // 路由
    const route = useRoute();
    // 商品数据
    const tableData = ref([]);
    // 设备名称
    const equipmentName = ref('');
    // 刚进页面
    onMounted(() => {
      // 加载样式
      styleUrl('modifyPrice');
      const id = route.query.deviceId || "";
      const name = route.query.name || "";
      if (id) {
        cofficentForm.equipmentId = id;
        equipmentName.value = name;
        getList();
      }

    });
    // 获取商品列表
    const getList = () => {
      selectProducts({ equipmentId: cofficentForm.equipmentId }).then(res => {
        console.log('res', res)
        const { data } = res.data;
        if (data) {
          if (data.length > 0) {
            // 是否修改状态
            data.forEach(item => {
              item.isEdit = false;
            })
          }
          tableData.value = data;
        }
      })
    }
    // 修改的价格
    const cofficentForm = reactive({
      equipmentId: '',
      no: "",
      price: "",
      type: "",
    });
    // 自定义货币符号
    const currencySymbol = ref('￥');
    const loginUserStr = localStorage.getItem('loginUser');
    const loginUser = JSON.parse(loginUserStr);
    if (loginUser.currencySymbol) {
      currencySymbol.value = loginUser.currencySymbol;
    } else {
      currencySymbol.value = '￥';
    }

    // 点击修改
    const editClk = (row, idx) => {
      // 如果点击的是修改
      if (idx === 1) {
        tableData.value.forEach(item => {
          if (row.id !== item.id) {
            item.isEdit = false;
          }
        })
        row.isEdit = !row.isEdit;
      } else {
        cofficentForm.no = row.no;
        cofficentForm.price = row.rmbPrice;
        cofficentForm.type = 0;
        updatePrice(row);
      }
    };
    // 修改价格
    const updatePrice = (row) => {
      console.log('cofficentForm', cofficentForm)
      // 如果点击的是提交
      Api_getUpdaProdPrice(cofficentForm).then(res => {
        showToast(res.data.message);
        if (row) {
          row.isEdit = false;
        }
        setTimeout(() => {
          getList();
        }, 500);
      })
    };
    return {
      cofficentForm,
      editClk,
      tableData,
      showSugerPhoto,
      kDialogRef,
      noticeClk,
      confirmClk,
      equipmentName,
      currencySymbol,
    };
  },
};
</script>

<style lang="less" scoped></style>