<!--
 * @Author: quwangxin 2269636776@qq.com
 * @Date: 2023-04-27 15:14:20
 * @LastEditors: quwangxin 2269636776@qq.com
 * @LastEditTime: 2023-05-31 14:46:06
 * @FilePath: \601-app\pages\equipment_ledger\correlation_model\correlation_model.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="关联模具"
      @clickLeft="back"
    >
    </uni-nav-bar>
    <uni-section title="关联模具" type="line">
      <uni-collapse>
        <uni-collapse-item
          :open="index === 0"
          :typeOpen="1"
          :show-animation="true"
          v-for="(item, index) in tableData"
          :key="index"
        >
          <template v-slot:title>
            <view class="modle-info">
              <view class="modle-line">
                <view>
                  {{ item.informationName }}
                </view>
                <view>{{ item.informationCode }}</view>
              </view>
              <view class="modle-line">
                <text>{{ item.brandNum }}</text>
                <text>{{ item.modelType }}</text>
              </view>
            </view>
          </template>
          <CellInfo label="分类：" :value="item.classificationUrl"></CellInfo>
          <CellInfo
            label="收缩系数："
            :value="showShrinkageCoefficient(item, 'shrinkageCoefficient')"
          ></CellInfo>
          <CellInfo
            label="冲压次数："
            :value="showShrinkageCoefficient(item, 'maximumStampingTimes')"
          ></CellInfo>
        </uni-collapse-item>
      </uni-collapse>

      <u-empty
        style="padding: 40rpx 0"
        textSize="32rpx"
        text="暂无数据"
        v-if="!tableData.length"
      ></u-empty>
    </uni-section>
  </view>
</template>

<script>
import CellInfo from '@/components/CellInfo.vue'
import { post, get, postB } from '@/utils/api.js'
export default {
  components: {
    CellInfo
  },

  data () {
    return {
      info: {},
      tableData: []
    }
  },
  onLoad (option) {
    this.info = JSON.parse(decodeURIComponent(option.info))
    this.getData()
  },
  methods: {
    async getData () {
      const res = await get(
        this.apiUrl + `/information/relationInfo/${this.info.information.id}`
      )

      if (res?.success) {
        this.tableData = res.data
      }
    },
    showShrinkageCoefficient (row, key) {
      if (row.extendField) {
        return JSON.parse(row.extendField)[key] || ''
      }
    }
  }
}
</script>

<style scoped lang="scss">
.mainBox {
  /deep/.uni-collapse-item__title {
    background-color: rgba(215, 215, 215, 1);
  }
  /deep/.uni-collapse-item__wrap {
    background-color: rgba(244, 244, 244, 1);
  }
  .modle-info {
    .modle-line {
      width: 94%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 0;
      font-size: 28rpx;
    }
    .modle-line:last-child {
      color: #999;
      padding: 0rpx 0 20rpx;
    }
  }
}
</style>
