<template>
  <div>
    <c-dialog :showFooter="false"
              :title="'操作失败原因'"
              :visible="diaVisible"
              @cancel="diaCancel">

      <div class="mod-demo__demo}">
        <el-form :inline="true"
                 :model="dataForm"
                 class="form">
          <el-form-item label="失败原因"
                        prop="reason"
                        label-width="150px"
                        style="display:block">

            <span>{{dataForm.reason}}</span>

          </el-form-item>

          <el-form-item label="素材图片"
                        label-width="150px"
                        style="display:block">

            <el-image class="img"
                      v-for="(oneImg,index) in dataForm.screenshotUrl"
                      :key="index"
                      style="width: 100px; height: 100px"
                      :preview-src-list="getSrcList(index)"
                      :src="oneImg"></el-image>

          </el-form-item>
        </el-form>

      </div>

    </c-dialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import CDialog from '@c/CDialog'

export default {
  data () {
    return {
      loading: false,
      diaVisible: false,
      codeId: '',
      dataForm: {
        reason: '',
        screenshotUrl: []
      }
    }
  },
  components: {
    CDialog
  },
  mounted () {
  },
  methods: {
    initData (codeId) {
      this.codeId = codeId

      this.diaVisible = true
      this.dataForm.reason = '没有提供用户名密码失败失败没有提供用户名密码失败失败没有提供用户名密码失败失败没有提供用户名密码失败失败,没有提供用户名密码失败失败没有提供用户名密码失败失败没有提供用户名密码失败失败没有提供用户名密码失败失败'

      this.dataForm.screenshotUrl = ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg']
      // const url = '/third/code/reason'
      //   const param = {
      //     codeId: row.id
      //   }
      //   window.app.ajax.post(url, param,
      //     (data, rspMsg) => {
      //       this.$message.success(rspMsg)
      //     },
      //     (rspMsg, data) => {
      //       this.$message.error(rspMsg)
      //     })
    },
    getSrcList (index) {
      return this.dataForm.screenshotUrl.slice(index).concat(this.dataForm.screenshotUrl.slice(0, index))
    },
    diaCancel () {
      this.diaVisible = false
    }
  },
  computed: {
    tableHeight () {
      return this.clientHeight - 60 - 80 - 80 - 50 - 400
    },
    ...mapGetters(['clientHeight'])
  }
}
</script>
<style>
.d_reason {
  margin: 10px;
  font-size: 1px;
  font-family: PingFang SC;
}
.d_pic {
  margin: 10px;
}
.img {
  margin: 0 10px;
}
</style>
