<template>
    <div class="rawMaterial">
        <div style="color:rgba(29, 24, 188, 1);font-size: 4.5vw">主要原辅材料产品</div>
        <van-swipe class="my-swipe" width="auto" indicator-color="rgba(29, 24, 188, 1)" >
            <van-swipe-item v-for="(item,index) in safetyList" :key="index">
                <ul style="margin: 3vw 0">
                <li class="titleLi">
                    <div>
                        名称：
                    </div>
                    <input
                        type="text"
                        placeholder="请填写"
                        v-model="item.name"
                    />
                </li>
                <li class="titleLi">
                    <div>
                        规格：
                    </div>
                    <input
                        type="text"
                        placeholder="请填写"
                        v-model="item.specifications"
                    />
                </li>
                <li class="titleLi">
                    <div>
                        年用量：
                    </div>
                    <input
                        type="number"
                        placeholder="请填写"
                        v-model="item.annualUsage"
                    />
                </li>
                <li class="titleLi">
                    <div>
                        最大储存量：
                    </div>
                    <input
                        type="number"
                        placeholder="请填写"
                        v-model="item.maximumStorageCapacity"
                    />
                </li>
                <li class="titleLi">
                    <div>
                        储存形式：
                    </div>
                    <input
                        type="text"
                        placeholder="请填写"
                        v-model="item.storageForm"
                    />
                </li>
                <van-button type="primary" block color="rgba(29, 24, 188, 1)" @click="myConfirm">保存</van-button>
            </ul></van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import { getSafetyCompanyInfoMaterialListBySafetyCompanyInfoId } from '@/service/api_savety'
import myBus from '@/pages/homeItems/myBus'
export default {
    name: 'RawMaterial',
    props: ['faMsg'],
    data() {
        return {
            safetyList: [
                { name: '', specifications: '', annualUsage: '', maximumStorageCapacity: '', storageForm: '' },
                { name: '', specifications: '', annualUsage: '', maximumStorageCapacity: '', storageForm: '' },
                { name: '', specifications: '', annualUsage: '', maximumStorageCapacity: '', storageForm: '' }
            ]
        }
    },
    mounted() {
        this.getMsg()
    },
    methods: {
        getMsg() {
            // 获取主要原辅料
            getSafetyCompanyInfoMaterialListBySafetyCompanyInfoId({ id: this.faMsg }).then(res => {
                this.safetyList = res
            })
        },
        myConfirm() {
            this.$emit('confirm', this.safetyList)
        }
    }
}
</script>

<style lang="scss">
      .rawMaterial{
          padding:5vw 3vw;
          .titleLi {
              font-size: 3.5vw;
              //font-weight: 700;
              white-space: nowrap;
              color: #333333;
              display: flex;
              align-items: center;
              justify-content: space-between;
              height: 8vw;
              padding: 1vw 0 2vw 0;
              border-bottom: 1px solid rgb(243, 236, 236);
              input{
                  width: 50vw;
              }
              .required {
                  color: red;
              }
          }
          .van-swipe__indicators{
              bottom: 0px !important;
          }
          .van-swipe__indicator{
              background:grey ;
          }
      }
</style>
