<template>
  <div class="page">
    <div class="page_layout">
      <van-field
        style="margin-top: 12px"
        :value="infos.fbName"
        label="供应商名:"
        :border="false"
        disabled
      />
      <van-field
        :value="infos.operateTime"
        label="提交时间:"
        :border="false"
        disabled
      />
      <van-field
        :value="infos.creator"
        label="评分人员:"
        :border="false"
        disabled
      />
      <van-field
        :value="infos.scoreResult"
        label="评分成绩:"
        :border="false"
        disabled
      />

      <van-field
        :value="infos.matterContent"
        label="问题内容:"
        :border="false"
        disabled
      />

      <div style="padding: 10px 15px 10px 15px">


      <p class="tv">附件:</p>

      <div class="content_img">
        <img class="previewer-demo-img" v-for="(item, index) in list" :src="item.src" style="height: 50px;width: 50px;margin-right: 10px" @click="show(index)">
        <div v-transfer-dom>
          <previewer :list="list" ref="previewer" :options="options" @on-index-change="logIndexChange"></previewer>
        </div>
      </div>
      </div>
    </div>


  </div>
</template>

<script>
    import { Previewer,TransferDom } from 'vux'
    export default {
        name: "recordDetailPage",
        directives: {
            TransferDom
        },
        components:{
            Previewer
        },
        data(){
            return{
                infos:{},
                list:[]
            }
        },
        created() {
            try {
                EbeiPlugins.setNavigationItemTitle("记录详情");
            }catch (e) {

            }
            this.infos = this.$route.query.obj?this.$route.query.obj:{}
            console.log(this.infos)



            if(this.infos){
                if (this.infos.accessories){
                    let photos = this.infos.accessories.split(",")
                    photos.forEach(item =>{
                        this.list.push({
                            msrc:item,
                            src:item,
                        })
                    })
                }
            }
        },
        methods:{
            logIndexChange (arg) {
                console.log(arg)
            },
            show (index) {
                this.$refs.previewer.show(index)
            },
        }
    }
</script>

<style scoped lang="less">
  .page{
    background: rgb(249,249,249);
    height: 100vh;
    width: 100%;
    overflow: auto;
  }

  .page_layout{
    background: white;
    width: 100%;
    padding-bottom: 40px;
  }

  /deep/ .van-field__label{
    width: 70px;
  }

  /deep/ .van-cell{
    color: rgb(154,154,154);
    padding: 3px 16px 3px 16px;
  }

  /deep/ .van-field__control{
    color: black;
  }

  /deep/ .van-field__control:disabled{
    -webkit-text-fill-color: black !important;
  }

  .tv{
    color: rgb(154,154,154);
    font-size: 14px;
  }

  .content{
    color: black;
    font-size: 12px;
    margin-left: 6px;
    margin-top: 6px;
  }

  .content_img{
    margin-left: 16px;
    margin-top: 6px;
    display: flex;
    flex-direction: row;
  }
</style>
