<template>
  <div class="dashboard-container">
    <el-form :model="ruleFormTwo" ref="ruleFormTwo" label-width="100px">
      <el-row>
        <el-col :span="24">
          <el-table :data="tableDataA" class="table2" border>
            <el-table-column type="index" label="序号" width="50"  :disabled="isShow" ></el-table-column>
            <el-table-column prop="pzlb" label="品种" align="left" :disabled="isShow" ></el-table-column>
            <el-table-column prop="dj" label="等级" align="left"  :disabled="isShow" ></el-table-column>
            <el-table-column prop="pp" label="品牌" align="left"  :disabled="isShow" ></el-table-column>
            <el-table-column prop="gg" label="规格" align="left"  :disabled="isShow" ></el-table-column>
            <el-table-column prop="cd" label="产地" align="left" :disabled="isShow" ></el-table-column>
            <el-table-column prop="cosName" label="上次价格" align="left">
              <template slot-scope="scope">
                <el-input style="width:100%" clearable size="small" v-model="scope.row.bqsl" placeholder="请输入内容" :disabled="isShow" >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="state" label="当日价格" align="left">
              <template slot-scope="scope">
                <el-input style="width:100%" clearable size="small" v-model="scope.row.bqjg" placeholder="请输入内容" :disabled="isShow" >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="state" label="变动原因" align="left">
              <template slot-scope="scope">
                <el-input style="width:100%" clearable size="small" v-model="scope.row.bdyy" placeholder="请输入内容" :disabled="isShow" >
 
                </el-input>
              </template>
              <template slot-scope="scope">
                  <el-input style="width:100%" clearable size="small" v-model="scope.row.bdyy1" placeholder="请输入内容" :disabled="isShow" >
   
                  </el-input>
                </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="填报单位：" label-width="83px" class="setleft" style="margin-top: 10px;">
            <el-input :disabled="true" v-model="ruleFormTwo.sbdq" class="inpRight"></el-input>
            <!-- <el-cascader v-model="value" :options="options" label="ddd"></el-cascader> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上报日期：" label-width="83px" class="fourLabel" style="margin-top: 10px;">
            <el-input :disabled="true" v-model="ruleFormTwo.sbkssj" class="inpRight"></el-input>
            <!-- <el-cascader v-model="value" :options="options" label="ddd"></el-cascader> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item>
          <el-button type="primary"  @click="submitForm('ruleFormTwo')" :disabled="isShow"  v-if="!isShow"> 
            <i class="iconfont">&#xe681;</i><span> 增加</span>
          </el-button>
          <el-button type="primary" @click="resetForm('ruleForm')">
            <i class="iconfont">
              &#xe688;
            </i>
            <span> 取消</span>
          </el-button>
        </el-form-item>
      </el-row>
      <!-- <el-row>
        <el-col :span="24">
          <div style="text-align: center">
            <el-button icon="el-icon-search" size="medium" type="primary">保存</el-button>
           </div>
        </el-col>
      </el-row>   -->
    </el-form>
  </div>
</template>
<script>
  import { showListsLast, saveListsLast, editListsLast, editsaveListsLast } from '@/api/priceReport/list'
  // import tinymce from 'tinymce/tinymce'
  // import 'tinymce/themes/silver/theme'
  // import Editor from '@tinymce/tinymce-vue'
  export default {
    data() {
      return {
        ruleFormTwo: {
          sbdq: '质检中心',

        },
        isShow: false,
        value: [],
        options: [{
          value: 'zhinan',
          label: '指南',
          children: []
        }],
        tableDataA: [],
        isAdd: true,
        rules: {
          name: [
            { required: true, message: '标题名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        },
      };
    },
    created() {
      if (this.$route.query.state === 'add') {
        this.isShow = false;
        this.ruleFormTwo.sbkssj = this.format(new Date(), 'yyyy-MM-dd hh:mm:ss');
        this.getListShow();
      } else if (this.$route.query.state === 'see') {
        this.isShow = true;
        this.editListShow();
      } else if (this.$route.query.state === 'edit') {
        this.isShow = false; 
        this.editListShow();
      }
      // this.getListShow();
      // this.ruleFormTwo.sbkssj = this.format(new Date(), 'yyyy-MM-dd hh:mm:ss');
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.$route.query.state === 'edit') {
              const data = {
                id: this.$route.query.id,
                tjLyjgInfoVOList: this.tableDataA,
                stdCode: this.ruleFormTwo.sbdq,
                stdDesc: this.ruleFormTwo.sbkssj,
              };
              editsaveListsLast(data).then(res => {
                this.$message({
                  type: "success",
                  message: '修改成功'
                })
              })
              this.$router.go(-1)

            } else if (this.$route.query.state === 'add') {
              const data = {
                tjLyjgInfoVOList: this.tableDataA,
                sbdq: this.ruleFormTwo.sbdq,
                sbkssj: this.ruleFormTwo.sbkssj,
              };
              saveListsLast(data).then(res => {
                this.$message({
                  type: "success",
                  message: '保存成功'
                })
              })
              this.$router.go(-1)

              // }
            } else {
              console.log('error submit!!');
              return false;
            }
          }
        });
      },
      editListShow() {
        if (this.$route.query.id) {
          editListsLast(this.$route.query.id).then(res => {
            this.tableDataA = res.data.tjLyjgInfoVOList
          })
        }
      },

      getListShow() {
        const data = {
          endDate: "",
          jcd: "",
          page: 0,
          priceType: "z8QzYg0qMJ8sakXrjz0",
          sbdq: "",
          size: 0,
          startDate: "",
        }
        showListsLast(data).then(response => {
          this.tableDataA = response.data.lastLyjgInfoVOList
          // this.limit.total = response.data.total 
        })
      },
      resetForm(formName) {
        // this.$refs[formName].resetFields();
        this.$router.go(-1)
      },
      format(now, mask) {
        const d = now;
        const zeroize = function (value, length) {
          if (!length) length = 2;
          value = String(value);
          for (var i = 0, zeros = ''; i < (length - value.length); i++) {
            zeros += '0';
          }
          return zeros + value;
        };

        return mask.replace(/"[^"]*"|'[^']*'|\b(?:d{1,4}|m{1,4}|yy(?:yy)?|([hHMstT])\1?|[lLZ])\b/g, ($0) => {
          switch ($0) {
            case 'd': return d.getDate();
            case 'dd': return zeroize(d.getDate());
            case 'ddd': return ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'][d.getDay()];
            case 'dddd': return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][d.getDay()];
            case 'M': return d.getMonth() + 1;
            case 'MM': return zeroize(d.getMonth() + 1);
            case 'MMM': return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][d.getMonth()];
            case 'MMMM': return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][d.getMonth()];
            case 'yy': return String(d.getFullYear()).substr(2);
            case 'yyyy': return d.getFullYear();
            case 'h': return d.getHours() % 12 || 12;
            case 'hh': return zeroize(d.getHours() % 12 || 12);
            case 'H': return d.getHours();
            case 'HH': return zeroize(d.getHours());
            case 'm': return d.getMinutes();
            case 'mm': return zeroize(d.getMinutes());
            case 's': return d.getSeconds();
            case 'ss': return zeroize(d.getSeconds());
            case 'l': return zeroize(d.getMilliseconds(), 3);
            case 'L': var m = d.getMilliseconds();
              if (m > 99) m = Math.round(m / 10);
              return zeroize(m);
            case 'tt': return d.getHours() < 12 ? 'am' : 'pm';
            case 'TT': return d.getHours() < 12 ? 'AM' : 'PM';
            case 'Z': return d.toUTCString().match(/[A-Z]+$/);
            // Return quoted strings with the surrounding quotes removed
            default: return $0.substr(1, $0.length - 2);
          }
        });
      },
    },
    // submitForm(formName) {
    //   console.log('富文本编辑器', this.tinymceHtml)
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       alert('submit!');
    //     } else {
    //       console.log('error submit!!');
    //       return false;
    //     }
    //   });
    // // },
    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    //   this.$router.go(-1)
    // },
    // closePage() {
    //   this.$router.go(-1) 
    // },

    mounted() {
      // tinymce.init({})
    },
    // components: { Editor }
  }
</script>

<style scoped lang="scss">
  .setleft {
    margin-left: 100px;
  }

  .dashboard {
    &-container {
      margin: 30px;
    }

    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
</style>