<template>
  <el-dialog
    title="Excel导入分类"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="510px"
  >

  <div class="setp-box">
    <div class="setp">
      <div class="num">1</div>
      <div class="line"></div>
      <div class="num">2</div>
    </div>

    <div class="content">
      <div class="item">
        <div class="title">下载模版并填写</div>
        <div class="desc">请按照模版格式填写Excel表格内容，表格数据最多支持1000条</div>
        <div class="box">
          <div class="name-box">
          <svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-1sh3oaa-0 lmXXwv svg-icon-path-icon fill" viewBox="64 64 896 896" width="20" height="20"><defs></defs><g><path d="M854.6 288.7c6 6 9.4 14.1 9.4 22.6V928c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32h424.7c8.5 0 16.7 3.4 22.7 9.4l215.2 215.3zM790.2 326L602 137.8V326h188.2zM575.34 477.84l-61.22 102.3L452.3 477.8a12 12 0 0 0-10.27-5.79h-38.44a12 12 0 0 0-6.4 1.85 12 12 0 0 0-3.75 16.56l82.34 130.42-83.45 132.78a12 12 0 0 0-1.84 6.39 12 12 0 0 0 12 12h34.46a12 12 0 0 0 10.21-5.7l62.7-101.47 62.3 101.45a12 12 0 0 0 10.23 5.72h37.48a12 12 0 0 0 6.48-1.9 12 12 0 0 0 3.62-16.58l-83.83-130.55 85.3-132.47a12 12 0 0 0 1.9-6.5 12 12 0 0 0-12-12h-35.7a12 12 0 0 0-10.29 5.84z"></path></g></svg>
          <div class="name">店内分类导入模版.xlsx</div>
          </div>
          <el-button size="small" type="primary" @click="submit()">下载</el-button>
        </div>
      </div>

       <div class="item" style="margin-top:30px">
        <div class="title">下载模版并填写</div>
        <div class="desc">请按照模版格式填写Excel表格内容，表格数据最多支持1000条</div>
        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </div>
    </div>
  </div>
 
    <span slot="footer" class="dialog-footer">
      <el-button style="margin-right:18px" size="small" type="primary" @click="submit()">确认导入</el-button>
    </span>
  </el-dialog>
</template>
<script>
// import PicUpload from '@/components/pic-upload'
export default {
  data () {
    return {
      visible: false,
     
    }
  },
 
  methods: {
    open(){
      this.visible = true
    },
    submit () {
       this.visible = false
      this.$emit('close')
      //  this.$http({
      //       url: this.$http.adornUrl(`/prod/category`),
      //       method: this.dataForm.categoryId ? 'put' : 'post',
      //       data: this.$http.adornData({
      //         'categoryId': this.dataForm.categoryId || undefined,
      //         'categoryName': this.dataForm.categoryName,
      //         'status': this.dataForm.status,
      //         'seq': this.dataForm.seq,
      //         'grade': this.dataForm.grade,
      //         'parentId': this.dataForm.parentId,
      //         'pic': this.dataForm.pic
      //       })
      //     }).then(({ data }) => {
      //       this.$message({
      //         message: '操作成功',
      //         type: 'success',
      //         duration: 1500,
      //         onClose: () => {
      //           this.visible = false
      //           this.$emit('close')
      //         }
      //       })
      //     })
    },
   
  }
}
</script>

<style lang="scss">
.setp-box{
  display: flex;
  .setp{
    flex-shrink: 1;
    .num{
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid #ccc;
    }
    .line{
      width: 1px;
      height: 100px;
      background: #ccc;
      margin-left: 15px;
    }
  }

  .content{
    .title{
      font-size: 18px;
    }
    .desc{
          color: rgba(150, 150, 150, 1);
          font-size: 14px;
          line-height: 20px;
    }

    .box{
      border: 1px dashed rgba(232, 232, 236, 1);
      padding: 10px 20px;
      background: rgb(250, 250, 250);
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      .name-box{
        color: rgba(150, 150, 150, 1);
        font-size: 14px;
        line-height: 23px;
        display: flex;
        align-items: center;
      }
    }
    .upload-demo,.el-upload,.el-upload-dragger{
      width: 440px;
      height: 88px;
    }
    .el-icon-upload{
      margin: 0;
    }
  }
}
</style>
