<template>
  <div>
    <div class="fa-box">
      <div class="lik">
        <div class="fa-ji">
          <div class="ge"></div>
          <div class="fa-text">产品管理</div>
        </div>
        <div class="peiches">
          <el-button type="primary" @click="addEidor">添加产品</el-button>
        </div>
      </div>
      <div class="biaoge">
        <div class="biao-box">
          <div class="fhuo">
            <div class="fahuos">
              <div class="fas-text">部门ID</div>
              <input type="text" placeholder="请输入部门ID" class="fa-input" />
            </div>
            <div class="fahuos">
              <div class="fas-text">产品型号</div>
              <input
                type="text"
                placeholder="请输入产品型号"
                class="fa-input"
              />
            </div>
            <div class="fahuos">
              <div class="fas-text">产品编号</div>
              <input
                type="text"
                placeholder="请输入产品编号"
                class="fa-input"
                v-model="productId"
              />
            </div>
            <div class="fahuos">
              <div class="fas-text">状态</div>
              <input
                type="text"
                placeholder="请输入状态"
                class="fa-input"
                v-model="telegramStatus"
              />
            </div>
          </div>
        </div>
        <div class="zhonlist">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            height="100%"
            :header-cell-style="{ background: '#F4F4F5', color: '#303133' }"
          >
            <el-table-column
              fixed
              prop="productCoding"
              label="产品编码"
              width="184"
            >
            </el-table-column>
            <el-table-column prop="productName" label="产品名称" width="284">
            </el-table-column>
            <el-table-column prop="productType" label="产品类型 " width="128">
              <template slot-scope="scope">
                <span>{{ scope.row.productType == 1 ? "成套" : "标准" }}</span>
              </template>
            </el-table-column>
             <el-table-column prop="breed" label="品种" width="128">
            </el-table-column>
            <el-table-column prop="productModel" label="产品型号" width="128">
            </el-table-column>
            <el-table-column prop="size" label="尺寸" width="160">
            </el-table-column>
            <el-table-column prop="weight" label="重量" width="128">
            </el-table-column>
            <el-table-column prop="deptId" label="事业部 " width="160">
            </el-table-column>
            <el-table-column prop="status" label="状态 " width="160">
              <template slot-scope="scope">
                <span
                  type="text"
                  size="small"
                  :style="{
                    color:
                      scope.row.status == 1
                        ? 'rgba(255, 0, 0, 1)'
                        : 'rgba(0, 204, 0, 1)',
                  }"
                  >{{ scope.row.status == 1 ? "停用" : "正常" }}</span
                >
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="196">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="editor(scope.row)"
                  >编辑</el-button
                >
                <el-button type="text" size="small">{{
                  scope.row.status == 1 ? "解禁" : "禁用"
                }}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="tiaoshu">
        <div class="left-io"></div>
        <div class="gon">共{{ total }}条</div>
        <div class="kls">
          <el-pagination
            :page-size="10"
            :pager-count="11"
            layout="prev, pager, next"
            :total="total"
            :current-page="pageNum"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 添加产品 -->
    <el-dialog
      :title="editorProduct == '' ? '添加产品' : '编辑商品'"
      :visible.sync="dialogVisible"
      width="55%"
      style="margin-top: 10%"
      :append-to-body="true"
    >
      <div class="liebiao">
        <div class="fahuo-li">
          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">产品型号</div>
              <input
                type="text"
                placeholder="请输入产品型号"
                class="input"
                v-model="productModel"
              />
            </div>

            <div class="sd">
              <div class="fa-ji">产品名称</div>
              <input
                type="text"
                placeholder="请输入产品名称"
                class="input"
                v-model="productName"
              />
            </div>

            <div class="sd">
              <div class="fa-ji">品类</div>
              <input
                type="text"
                placeholder="请输入品类"
                class="input"
                v-model="breed"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">事业部</div>
              <input
                type="text"
                placeholder="请输入事业部"
                class="input"
                v-model="deptId"
              />
            </div>
          </div>

          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">产品编号</div>
              <input
                type="text"
                placeholder="请输入产品编号"
                class="input"
                v-model="productCoding"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">尺寸</div>
              <input
                type="text"
                placeholder="请输入尺寸"
                class="input"
                v-model="size"
              />
            </div>
          </div>

          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">产品类型</div>
              <el-select v-model="productType" placeholder="请选择产品类型">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="sd">
              <div class="fa-ji">重量</div>
              <input
                type="text"
                placeholder="请输入重量"
                class="input"
                v-model="weight"
              />
            </div>
          </div>
        </div>

        <div class="queren">
          <el-button type="primary" round @click="xinzeng">确认</el-button>
          <el-button round @click="dialogVisible = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      options: [{
        value: '1',
        label: '成套'
      }, {
        value: '2',
        label: '标准'
      }],
      dialogVisible: false,
      dialogImageUrl: "",
      productModel: "", //产品型号
      breed: "", //品类
      deptId: "", //事业部
      productId: "", //产品编码
      size: "", //尺寸
      productType: "", //产品类型
      weight: "", //重量
      productName: '',
      pageSize: 10,
      pageNum: 1,
      productId: "", //产品编码
      telegramStatus: "", //转态
      total: null,
      editorProduct: '',//获取同行的所有数据

    };
  },
  mounted() {
    this.chanpinliet();
  },

  watch:{
       data(dialogVisible,newdialogVisible){
         console.log(dialogVisible)
         console.log(newdialogVisible)
       }
  },

  methods: {
    //新增产品  修改必须还的用这个
    xinzeng() {
      let that = this;
      let params = {
        productModel: that.productModel,
        breed: that.breed,
        deptId: that.deptId,
        productCoding: that.productCoding,
        size: that.size,
        productType: that.productType,
        weight: that.weight,
        productName: that.productName,
      };
      if (that.editorProduct == '' || that.editorProduct == null) {
        let url = "/api/system/product/add";
        that.$axios
          .post(url, params)
          .then(function (res) {
            console.log(res);
            that.$message({
              message: "添加成功",
              type: "success",
            });
            that.dialogVisible = false
            that.tableData.unshift(params)
            that.total++
          })
          .catch(function (err) {
            console.log(err);
          });
      } else {
        let url = "/api/system/product/edit";
        that.$axios
          .put(url, params)
          .then(function (res) {
            console.log(res);
            that.$message({
              message: "修改成功",
              type: "success",
            });
            that.dialogVisible = false
            that.editorProduct = ''
          })
          .catch(function (err) {
            console.log(err);
          });
      }


    },
    //获取产品信息列表
    chanpinliet() {
      let that = this;
      var url = "/api/system/product/list";
      let params = {
        pageNum: that.pageNum,
        pageSize: that.pageSize,
        productId: that.productId,
        telegramStatus: that.telegramStatus,
      };
      that.$axios
        .post(url, params)
        .then(function (res) {
          console.log(res);
          that.tableData = res.rows;
          that.total = res.total
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    //编辑发货申请
    handleClick(row) {
      console.log(row);
      this.dialogVisibleg = false;
      this.dialogVisibleyu = true;
    },
    //上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //**编辑商品 * */
    editor(val) {
      console.log(val)
        this.$axios("api/system/product/"+val.productId+"").then(res=>{
          console.log(res)
          val=res.data
        }).catch(err=>{
          console.log(err)
        })
      this.editorProduct = val;
      this.dialogVisible = true
      this.productModel = val.productModel
      this.breed = val.breed
      this.deptId = val.deptId
      this.productCoding = val.productCoding
      this.size = val.size
      this.productType = val.productType
      this.weight = val.weight
      this.productName = val.productName
      this.productId=val.productId

    },
    /**  添加商品 * */
    addEidor() {
      this.editorProduct = '';
      this.dialogVisible = true
      this.productModel = ''
      this.breed = ''
      this.deptId = ''
      this.productId = ''
      this.size = ''
      this.productType = ''
      this.weight = ''
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.chanpinliet()
    }
  },
  updated() {
  }
};
</script>
<style>
.el-dialog__body {
  padding: 5px 20px;
  padding-bottom: 68px;
}
.el-dialog__title {
  font-size: 22px !important;
  color: #000000 !important;
  font-weight: 500;
}
.el-upload--picture-card {
  width: 80px !important;
  height: 80px !important;
  line-height: 80px !important;
}
.el-upload-list--picture-card .el-upload-list__item {
  width: 80px !important;
  height: 80px !important;
  line-height: 80px !important;
}
.el-carousel__container {
  margin-top: 52px;
  height: 629px;
}
/* .el-table /deep/.DisabledSelection .cell .el-checkbox__inner{
    margin-left: -30px;
    position:relative;
  } */
.el-table /deep/.DisabledSelection .cell:before {
  content: "全选";
  position: absolute;
  right: 42px;
}
</style>
<style scoped>
@import "../../css/fa.css";
@import "../../css/pei.css";
</style>