<template>
  <div class="app-container">
      <div class="listconadd" style="padding: 20px;">
        <el-table  :data="tableData" border style="width: 100%" >
          <el-table-column label="序号" width="55px"  type="index" align="center"></el-table-column>
          <el-table-column prop="enpName" label="厂家"  align="center">
          </el-table-column>
          <el-table-column prop="name" label="品牌" align="center" >
          </el-table-column>
          <el-table-column prop="confBrandProportionList" label="占比详情"  align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="purchase(scope.row)"
              >
                查看详情
              </el-button>
            </template>
          </el-table-column>
          <el-table-column  label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="addList(scope.row)"
              >
                添加
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
       <!-- 查看占比 -->
      <el-dialog
          :title="dialogTitle + '食品占比'"
          :visible.sync="entey"
          width="40%"
        >
        <el-table  :data="foodList" border style="width: 100%" >
          <el-table-column label="序号" width="55px"  type="index" align="center"></el-table-column>
          <el-table-column prop="brandName" label="品牌名称" align="center" >
          </el-table-column>
          <el-table-column prop="typeName" label="占比名称" align="center" >
          </el-table-column>
          <el-table-column prop="proportion" label="占比百分比" align="center" >
          </el-table-column>
          <el-table-column  label="操作"  align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="modify(scope.row)"
              >
                修改
              </el-button>
              <el-button type="danger" size="mini" @click="modfood(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        </el-dialog>
      <!-- 添加食品占比 -->
      <el-dialog
          :title="dialogTitle + '食品占比'"
          :visible.sync="editDialog"
          width="40%"
        >
        <table class="e-table" cellspacing="0">
            <tr>
              <td>品牌名称</td>
              <td>
                <el-input
                 v-model="makeUp.brandName"
                  style="width: 300px"
                  disabled
                ></el-input>
              </td>
            </tr>
            <tr>
              <td>占比名称</td>
              <td>
                <el-input
                v-model="makeUp.typeName"
                  style="width: 300px"
                ></el-input>
              </td>
            </tr>
            <tr>
              <td>占比百分比</td>
              <td>
                <el-input
                v-model="makeUp.proportion"
                  style="width: 300px"
                ></el-input>
              </td>
            </tr>
          </table>
          <div style="margin-top: 20px; text-align: center">
            <el-button type="primary" @click="save()">添加</el-button>
          </div>
        </el-dialog>
      <!-- 修改食品占比 -->
      <el-dialog
          :title="dialogTitle + '食品占比'"
          :visible.sync="modifyFood"
          width="40%"
        >
        <table class="e-table" cellspacing="0">
            <tr>
              <td>品牌名称</td>
              <td>
                <el-input
                 v-model="makeUp.brandName"
                  style="width: 300px"
                  disabled
                ></el-input>
              </td>
            </tr>
            <tr>
              <td>占比名称</td>
              <td>
                <el-input
                v-model="makeUp.typeName"
                  style="width: 300px"
                ></el-input>
              </td>
            </tr>
            <tr>
              <td>占比百分比</td>
              <td>
                <el-input
                v-model="makeUp.proportion"
                  style="width: 300px"
                ></el-input>
              </td>
            </tr>
          </table>
          <div style="margin-top: 20px; text-align: center">
            <el-button type="primary" @click="modifys()">修改</el-button>
          </div>
          
        </el-dialog>
</div>
</template>
  
  <script>
import {selectConfBrandProportion,save,alterBrandProportion,deleteConfBrandProportion} from '@/api/Zhj/parameterSet/index.js'
export default {
  data() {
    return {
      tableLoading: false,
      dialogTitle: "",
      tableData: [],
      foodList: [],
      editDialog:false,
      modifyFood:false,
      entey:false,
      makeUp:{
        brandSid:'',
        brandName:'',
        typeName:'',
        proportion:'',
      },
      ruleForm: {
          time: '',
          data:{
          salesAmount:'',
          purchase:'',
          salesDishes:''
          }
        },
    };
  },
  mounted() {
    this.getPagelist()
  },
  methods: {
    resetSearch() {
      // 重置
      this.makeUp = {
        brandSid:'',
        brandName:'',
        typeName:'',
        proportion:'',
      };
    },
    getPagelist(){
      selectConfBrandProportion().then((res)=>{
      this.ListName = res.data
      this.tableData=res.data
    })
    },
    save(){
      if(this.makeUp.proportion>100 || this.makeUp.proportion<0){
        this.$message({
          message: '输入的占比不符合规则',
          type: 'warning'
        });
      }else{
        save(this.makeUp).then((res)=>{
        this.editDialog = false;
        this.$message({
            message: res.msg,
            type: "success",
          });
        this.resetSearch()
        this.getPagelist()
      })
      }
    }, 
    modifys(){
      alterBrandProportion(this.makeUp).then((res)=>{
        this.modifyFood = false;
        this.$message({
            message: res.msg,
            type: "success",
          });
        this.resetSearch()
        this.getPagelist()
      })
    }, 
    addList(row){
      this.resetSearch()
      this.dialogTitle = "添加";
      this.editDialog = true;
      this.makeUp.brandName = row.name
      this.makeUp.brandSid = row.sid
    },
    purchase(row){
      this.dialogTitle = "查看";
      this.entey = true;
      this.foodList=row.confBrandProportionList
    },
    modify(row){
      this.dialogTitle = "修改";
      this.entey = false;
      this.modifyFood = true;
      this.makeUp = Object.assign({}, row);
    },
    modfood(row){
      this.$confirm("确定要删除该占比吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteConfBrandProportion({ id: row.id }).then((res) => {
          this.entey = false;
          this.getPagelist()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      })
    },
    resetForm() {
      this.ruleForm= {
          time: '',
          data:{
          salesAmount:'',
          purchase:'',
          salesDishes:''
          }
        }
    }
  },
};
</script>
  
  <style scoped="scoped" >
  
</style>
  