<template>
  <div>
    <div class="screen-container">
      <slot name="header">
        <div>
          <el-button v-for="(item, index) in btnConfig" :key="index" :type="item.type" :size="item.size" @click="">{{
            item.text
          }}</el-button>
        </div>
        <div>
          <h5>提货进度</h5>
          <el-divider></el-divider>
          <el-row :gutter="20">
            <el-col :span="15" :offset="0">
              <el-progress :percentage="50"></el-progress>
            </el-col>
            <el-col :span="9" :offset="0" class="tr"> <i class="el-icon-edit"></i></el-col>
          </el-row>
        </div>
      </slot>
    </div>
    <div class="diy-table-1">
      <el-row>
        <el-col :span="8" class="item">
          <div class="label">销售计划单号：</div>
          <div class="value"></div>
        </el-col>
        <el-col :span="8" class="item">
          <div class="label">订单日期：</div>
          <div class="value"></div>
        </el-col>
        <el-col :span="8" class="item">
          <div class="label">单据状态：</div>
          <div class="value"></div>
        </el-col>
        <el-col :span="8" class="item">
          <div class="label">销售政策编号：</div>
          <div class="value"></div>
        </el-col>
        <el-col :span="8" class="item">
          <div class="label">经销商名称：</div>
          <div class="value"></div>
        </el-col>
        <el-col :span="8" class="item">
          <div class="label">业务员：</div>
          <div class="value"></div>
        </el-col>
        <el-col :span="24" class="item">
          <div class="label">销售政策说明：</div>
          <div class="value"></div>
        </el-col>
        <el-col :span="24" class="item">
          <div class="label">回复：</div>
          <div class="value"></div>
        </el-col>
        <el-col :span="24" class="item">
          <div class="label">备注：</div>
          <div class="value"></div>
        </el-col>
        <el-col :span="8" class="item">
          <div class="label">制单人：</div>
          <div class="value"></div>
        </el-col>
        <el-col :span="8" class="item">
          <div class="label">审核人：</div>
          <div class="value"></div>
        </el-col>
        <el-col :span="8" class="item">
          <div class="label">关闭人：</div>
          <div class="value"></div>
        </el-col>
      </el-row>
    </div>
    <div class="mymain-container">
      <el-table
        v-loading="listLoading"
        :data="dataList"
        element-loading-text="Loading"
        border
        show-summary
        fit
        highlight-current-row
        stripe
      >
        <el-table-column type="selection" width="55" align="center"> </el-table-column>
        <template v-for="col in columns">
          <el-table-column
            align="center"
            :label="col.lable"
            :prop="col.prop"
            :min-width="col.widht"
            show-overflow-tooltip
          >
          </el-table-column>
        </template>
        <el-table-column align="center" fixed="right" label="操作" min-width="160">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="hanleEdit(scope.row)">审批</el-button>
            <el-button type="text" size="small" @click="hanleDateil(scope.row)">退订</el-button>
            <el-button type="text" size="small" @click="hanleDateil(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Common />
    </div>
    <h5>{{ type == 1 ? '审批' : type == 2 ? '退货信息' : '' }}</h5>
    <el-divider></el-divider>
    <div class="diy-table-1">
      <el-row :gutter="0">
        <el-col :xs="12" :sm="12" :lg="12" class="item">
          <div class="label">{{ type == 1 ? '审批人' : '操作人' }}</div>
          <div class="value"></div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="12" class="item" v-if="type == 2">
          <div class="label">退货日期</div>
          <div class="value"></div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="12" class="item" v-if="type == 1">
          <div class="label">审批结果</div>
          <div class="value">
            <el-radio-group v-model="examineStatus">
              <el-radio label="OK">通过</el-radio>
              <el-radio label="FAIL">驳回</el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" class="item">
          <div class="label">{{ type == 1 ? '审批说明' : '退货说明' }}</div>
          <div class="value">
            <el-input v-model="examineRemark" :placeholder="type == 1 ? '审批说明' : '退货说明'"></el-input>
          </div>
        </el-col>
      </el-row>
    </div>
    <br />
    <div class="btn-group clearfix" v-if="isShow">
      <div class="fl">
        <el-button type="primary" size="small" @click="onSubmit">提交审批</el-button>
        <!-- <el-button type="primary" size="small" @click="resetScreenForm"
              >重置</el-button
            > -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 1 // 1,2,3 展示不同页面样式
    },
    isShow: {
      type: Boolean,
      default: true //  审核模块展示
    },
    listLoading: {
      // table 加载loading
      type: Boolean,
      default: false
    },
    dataList: {
      type: Array,
      default: [] // table 数据
    },
    columns: {
      type: Array,
      default: [] // table的label和prop
    },
    examineStatus: {
      type: String,
      default: ''
    },
    examineRemark: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      btnConfig: [
        {
          text: '详情',
          size: 'small',
          type: 'primary'
        }
      ]
    }
  },
  methods: {
    onSubmit() {
      this.$emit('handleSumit', {
        examineStatus: this.examineStatus,
        examineRemark: this.examineRemark,
        id: this.id
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.screen-container {
  margin: 20px 0;
}
</style>
