<template>
  <div class="showGoodsIdx">
    <s-header :name="$t('device.showGoodsPage.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.showGoodsPage.equipmentName') }}：</span>
        <span class="c-text-color c-text-14">{{ equipmentName }}</span>
      </div>
    </div>
  </div>
  <div class="l-flex-between o-m-10">
    <div>{{ $t('device.modifyPricePage.total') }}{{ tableData.length }}{{ $t('device.modifyPricePage.goods') }}
    </div>
  </div>
  <van-row class="goods o-mlr-8" wrap="true">
    <van-col v-for="(item, index) in tableData" :key="index" class="goodsCon o-mr-14" span="11">
      <div class="l-flex-RC">
        <van-image width="60" height="60" fit="contain" :src="showSugerPhoto(item)" />
        <span class="o-ml-10" style="word-wrap: break-word; width: 50px;">{{ item.productName }}</span>
        <van-switch class="o-ml-1" v-model="switchStates[index]" size="20px" active-color="#4dc294"
          @change="handleChange(index)" />
      </div>
      <van-divider :style="{ color: '#1baeae', borderColor: '#1baeae', fontSize: '20px', fontWeight: 500 }" />
    </van-col>
  </van-row>
  <div class="l-flex-center" style="margin: 16px">
    <van-button round block class="Btn" type="primary" native-type="submit" @click="updateShowGoods()">
      {{ $t('device.submitAndPushDeviceUpdates') }}
    </van-button>
  </div>
</template>

<script>
// 导入接口
import {
  selectProducts,
  updateProductsShow
} from '@/service/device/index';
import sHeader from "@/components/SimpleHeader";
import {
  ref,
  reactive
} from "@vue/reactivity";
import {
  onMounted
} from '@vue/runtime-core';
import {
  useRoute,
  useRouter
} from 'vue-router';
import {
  showFailToast, showDialog, showConfirmDialog
} from 'vant';
import {
  useI18n
} from "vue-i18n";
import { styleUrl } from '../../../common/js/utils';
export default {
  components: {
    sHeader
  },
  setup() {
    // 引入语言
    const {
      t
    } = useI18n();
    // 商品图片路径处理
    const showSugerPhoto = (row) => {
      let imgId = row.no;
      if (imgId) {
        return require(`../../../assets/order/spunSugar/goods/${imgId}.png`);
      }
      return imgId;
    };
    // 路由
    const route = useRoute();
    const router = useRouter();
    // 商品数据
    const tableData = ref([]);
    const switchStates = ref([]);
    // 设备名称
    const equipmentName = ref('');

    // 刚进页面
    onMounted(() => {
      // 加载样式
      styleUrl('showGoods');
      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 => {
              if (item.showType == null || item.showType == 0) {
                switchStates.value.push(true);
              } else {
                switchStates.value.push(false);
              }
            })
          }
          tableData.value = data;
        }
      })
    }
    // 修改的价格
    const cofficentForm = reactive({
      equipmentId: '',
    });

    // 更改状态
    const handleChange = (index) => {
      // console.log(index);
      // console.log(switchStates.value[index]);
      if (switchStates.value[index]) {
        tableData.value[index].showType = 0;
      } else {
        tableData.value[index].showType = 1;
      }
      // console.log(tableData.value[index]);
    };


    // 点击提交
    const updateShowGoods = () => {
      showConfirmDialog({
        title: t('device.openRemind'),
        message: t('device.editCheck'),
      }).then(() => {
        console.log(tableData.value);
        var products = tableData.value;
        var list = JSON.stringify(products);
        updateProductsShow({
          productList: list
        }).then((res) => {
          console.log(res.data.message);
          // Toast();
          showDialog({
            message: t('device.modificationSucceeded'),
          }).then(() => {
            //返回上一页
            router.go(-1);
          });
          setTimeout(() => {
            getList();
          }, 1000);
        }).catch((error) => {
          console.log(error);
          showFailToast(t('device.unknownError'));
        });
      });
    };
    return {
      cofficentForm,
      tableData,
      showSugerPhoto,
      equipmentName,
      updateShowGoods,
      switchStates,
      handleChange,
    };
  },
};
</script>

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