<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" :index="typeIndex" label="序号" width="50"></el-table-column>
            <el-table-column prop="cosName" label="品种" align="left"></el-table-column>
            <el-table-column prop="cosName" label="等级" align="left"></el-table-column>
            <el-table-column prop="cosName" label="上次上报价格(元/公斤)" align="left"></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.states" placeholder="请输入内容">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="cosName" label="数量" align="left"></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.states" placeholder="请输入内容">
                </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-cascader v-model="value" :options="options" @change="handleChange" 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-cascader v-model="value" :options="options" @change="handleChange" label="ddd"></el-cascader>
            </el-form-item> </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div style="text-align: center">
            <el-button class="outButton" icon="el-icon-search" size="medium" type="primary">保存</el-button>
            <el-button @click="closePage" icon="el-icon-error" class="logBtn">关闭</el-button>
          </div>
        </el-col>
      </el-row>


    </el-form>

  </div>
</template>
<script>
  import tinymce from 'tinymce/tinymce'
  import 'tinymce/themes/silver/theme'
  import Editor from '@tinymce/tinymce-vue'
  export default {
    data() {
      return {
        ruleFormTwo: {
        },
        value: [],
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [ ]
          }],
        tableDataA: [],
        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' }
          ]
        },
        tinymceHtml: '',
        init: {
          language_url: '../static/zh_CN.js',
          language: 'zh_CN',
          // skin_url: '../static/skins/lightgray',
          height: 300,
          plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
          toolbar:
            'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
          branding: false
        }
      };
    },
    methods: {
      editorInit() {

      },
      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>