<template>
  <el-dialog title="季度评价" width='975px' :visible.sync="isShowInfo" append-to-body @close='close'>
    <div class="evaluateDialog">
      <div class="Dialog-input">
        <div class="inputContent">
          <div class="inputBox">
            <red-star />
            <input-vue title="供应商编号" placeholder="请输入编号" class="inputWidth" width="200px">
            </input-vue>
          </div>
          <div class="inputBox">
            <red-star />
            <input-vue title="季度评价时间" class="inputWidth">
              <el-select v-model="quarterValue" clearable placeholder="请选择" style="width:200px">
                <el-option v-for="item in quarterOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </input-vue>
          </div>
          <div class="inputBox">
            <input-vue title="季度评价说明" class="inputWidth" placeholder="请输入季度评价说明" width="200px">
            </input-vue>
          </div>
        </div>
        <div class="inputContent">
          <div class="inputBox">
            <red-star />
            <input-vue title="供应商名称" placeholder="请输入供应商名称" class="inputWidth" width="200px"></input-vue>
          </div>
          <div class="inputBox">
            <red-star />
            <input-vue title="季度评价结果" class="inputWidth">
              <el-select v-model="resultValue" clearable placeholder="请选择" style="width:200px">
                <el-option v-for="item in resultOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </input-vue>
          </div>
          <div class="inputBox">
            <red-star />
            <input-vue title="季度评价日期" class="inputWidth">
              <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="dateValue" style="width:200px">
              </el-input>
            </input-vue>
          </div>
        </div>
      </div>
      <div class="imgContent">
        <div class="img-box">
          <div class="img-item">
            <div class="title-box">
              <div class="img-title">季度评价.pdf</div>
              <div class="img-btn">
                <el-button type="text" class="btn">下载</el-button>
              </div>
            </div>
            <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div class="img-item">
            <div class="title-box">
              <div class="img-title">季度评价.png</div>
              <div class="img-btn">
                <el-button type="text" class="btn">下载</el-button>
              </div>
            </div>
            <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
        <div class="uploadbtn">
          <el-button type="primary">上传季度评价结果</el-button>
        </div>
      </div>
      <div class="btnBox">
        <el-button type="primary" class="save">保存</el-button>
        <el-button type="info" class="close" @click="close">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import dialogHeader from './dialogHeader.vue';
import inputVue from '../input/inputVue.vue'
import RedStar from '../redStar.vue';
export default {
  components: { inputVue, dialogHeader, RedStar },
  data () {
    return {
      isShowInfo: true,
      quarterValue: '',
      quarterOptions: [
        { label: '2021第一季度', value: '2021第一季度' },
        { label: '2021第二季度', value: '2021第二季度' }
      ],
      resultValue: '',
      resultOptions: [
        { label: 'A', value: 'A' },
        { label: 'B', value: 'B' },
        { label: 'C', value: 'C' }
      ],
      dateValue: ''
    }
  },
  methods: {
    close () {
      this.$emit('close')
    }
  }
}
</script>

<style lang='scss' scoped>
.evaluateDialog {
  width: 975px;
  padding: 0 20px;
  box-sizing: border-box;

  .Dialog-input {
    padding: 10px 20px;
    display: flex;

    .inputContent {
      margin-right: 30px;
      display: flex;
      flex: 1;
      flex-direction: column;

      .inputBox {
        width: 350px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }

  .imgContent {
    margin: 20px;
    display: flex;

    .img-box {
      margin-right: 48px;
      width: 600px;
      height: 250px;
      display: flex;
      justify-content: space-between;
      padding: 10px 40px;
      border: 1px solid #000;

      .img-item {
        width: 178px;
        height: 200px;

        .title-box {
          display: flex;
          justify-content: space-between;

          .img-title {
            margin-right: 20px;
          }

          .img-btn {
            .btn {
              padding: 0;
            }
          }
        }
      }
    }
  }

  .btnBox {
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .save,
    .close {
      width: 100px;
    }

  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>